Responsive Collapse of Columns

[eugeneborodkin]

Is there any way to implement a responsive collapse of columns on resizing in React-Table?

Currently, we can specify hard-coded "expandable/collapseable" columns, but we need that to be dynamic based on table size. Also, we do not want a horizontal scrollbar.

What we're looking for is shown in the animation on this site:
https://www.npmjs.com/package/react-super-responsive-table

[eugeneborodkin]

No. This seems to be a rare feature, and hardly anyone asks for it. It is provided in jQuery DataTables though.

[livevsonline]

Im really impressed if this is a rare feature in 2022/2023, everyone should be conserned about responsive design/mobile visitors..

Maybe a combination of maxSize/size can do the job

[caiocinel]

i'm also looking for that

[SENSIB0I]

me2

[ssarahs-lab]

Same, sad times

[Integerous]

Same here.

[MorningLit]

Same, even now in November 2023 😢

[benjaminnkem]

Same here, and it's December 2023 😭

[CarlosDavidAraujo]

I think I found a solution using v8:

Add the react-table-config.d.ts file to the root of your directory with the following code:

import "@tanstack/react-table";

declare module "@tanstack/react-table" {
  interface ColumnMeta<TData extends RowData, TValue> {
    className?: string;
  }
}

Now, in the column definition, the meta property will contain the added className property:

{
  accessorKey: "solicitante",
  cell: "",
  header: "",
  meta: { className: "hidden sm:block" },
}

Make sure to pass the property value to the components:

{table.getHeaderGroups().map((headerGroup) => (
  <TableRow key={headerGroup.id}>
    {headerGroup.headers.map((header) => (
      <TableHead
        key={header.id}
        className={cn(header.column.columnDef.meta?.className)} // passing the className to the TableHead
      >
        {header.isPlaceholder
          ? null
          : flexRender(
              header.column.columnDef.header,
              header.getContext(),
            )}
      </TableHead>
    ))}
  </TableRow>
))}

// Do the same for the cells:

{row.getVisibleCells().map((cell) => (
  <TableCell
    key={cell.id}
    className={cn(cell.column.columnDef.meta?.className)}
  >
    {flexRender(cell.column.columnDef.cell, cell.getContext())}
  </TableCell>
))}

This solution allows you to use the className property within the meta object to control the visibility of columns based on breakpoints.

[osh6006]

I tried the same way, but a type error occurred, so I tried the following way.

{
  accessorKey: "solicitante",
  cell: "",
  header: "",
  meta: { className: "hidden sm:block" },
}

{table.getHeaderGroups().map((headerGroup) => (
  <TableRow key={headerGroup.id}>
              {headerGroup.headers.map((header) => {

                // type avoid
                const breakpoints: any = header.column.columnDef.meta; 

                return (
                      <TableHead
                        key={header.id}
                        className={cn(breakpoints)} // passing the className to the TableHead
                      >
                        {header.isPlaceholder
                          ? null
                          : flexRender(
                              header.column.columnDef.header,
                              header.getContext(),
                            )}
                      </TableHead>
                );
              })}
  </TableRow>
))}

// Do the same for the cells:

{row.getVisibleCells().map((cell) => {
    
    // type avoid
    const breakpoints: any = header.column.columnDef.meta; 

    return (<TableCell
      key={cell.id}
      className={cn(breakpoints)}
    >
      {flexRender(cell.column.columnDef.cell, cell.getContext())}
    </TableCell>
  )
})}

This is not a way to specify the exact type.
Can someone tell me how to specify the exact type??

[maxih4]

I think I found a solution using v8:

Add the react-table-config.d.ts file to the root of your directory with the following code:

import "@tanstack/react-table";

declare module "@tanstack/react-table" {
  interface ColumnMeta<TData extends RowData, TValue> {
    className?: string;
  }
}

Now, in the column definition, the meta property will contain the added className property:

{
  accessorKey: "solicitante",
  cell: "",
  header: "",
  meta: { className: "hidden sm:block" },
}

Make sure to pass the property value to the components:

{table.getHeaderGroups().map((headerGroup) => (
  <TableRow key={headerGroup.id}>
    {headerGroup.headers.map((header) => (
      <TableHead
        key={header.id}
        className={cn(header.column.columnDef.meta?.className)} // passing the className to the TableHead
      >
        {header.isPlaceholder
          ? null
          : flexRender(
              header.column.columnDef.header,
              header.getContext(),
            )}
      </TableHead>
    ))}
  </TableRow>
))}

// Do the same for the cells:

{row.getVisibleCells().map((cell) => (
  <TableCell
    key={cell.id}
    className={cn(cell.column.columnDef.meta?.className)}
  >
    {flexRender(cell.column.columnDef.cell, cell.getContext())}
  </TableCell>
))}

This solution allows you to use the className property within the meta object to control the visibility of columns based on breakpoints.

Thank you for me that works. Althoug display block makes my headers float to the top instead of aligning in the center like the other header cells...

The solution is using display: table-cell so for tailwind that means hidden sm:table-cell

[dennis-gonzales]

I think I found a solution using v8:

Add the react-table-config.d.ts file to the root of your directory with the following code:

import "@tanstack/react-table";

declare module "@tanstack/react-table" {
  interface ColumnMeta<TData extends RowData, TValue> {
    className?: string;
  }
}

Now, in the column definition, the meta property will contain the added className property:

{
  accessorKey: "solicitante",
  cell: "",
  header: "",
  meta: { className: "hidden sm:block" },
}

Make sure to pass the property value to the components:

{table.getHeaderGroups().map((headerGroup) => (
  <TableRow key={headerGroup.id}>
    {headerGroup.headers.map((header) => (
      <TableHead
        key={header.id}
        className={cn(header.column.columnDef.meta?.className)} // passing the className to the TableHead
      >
        {header.isPlaceholder
          ? null
          : flexRender(
              header.column.columnDef.header,
              header.getContext(),
            )}
      </TableHead>
    ))}
  </TableRow>
))}

// Do the same for the cells:

{row.getVisibleCells().map((cell) => (
  <TableCell
    key={cell.id}
    className={cn(cell.column.columnDef.meta?.className)}
  >
    {flexRender(cell.column.columnDef.cell, cell.getContext())}
  </TableCell>
))}

This solution allows you to use the className property within the meta object to control the visibility of columns based on breakpoints.

Works for me, thanks

[brajabi]

I did this and worked for me

  const [windowWidth, setWindowWidth] = useState(window.innerWidth);
  useEffect(() => {
    function handleResize() {
      setWindowWidth(window.innerWidth);
      window.addEventListener("resize", handleResize);
    }
    return () => {
      window.removeEventListener("resize", handleResize);
    };
  }, []);

  const mobileBreakpoint = 768;

  const dynamicColumns = useMemo(() => {
    if (windowWidth < mobileBreakpoint) {
      return columns.filter((column) => !column.meta?.hiddenOnMobile);
    }
    return columns;
  }, [windowWidth, columns]);

also created a type for it

import "@tanstack/react-table";

declare module "@tanstack/react-table" {
  interface ColumnMeta<TData extends RowData, TValue> {
    hiddenOnMobile?: boolean;
  }
}

[dryladen]

my savior, we are doing same features right now lol, thank you for the solution

[dkelsen]

Would be great if there were a native solution to this.

[KevinVandy]

Use APIs like getAllColumns and getAllCells instead of the visibility aware ones. Then use CSS to hide those cells

[juancruzroldan95]

I have found a solution for this using the Column Visibility API, inspired by the UI of the DataTables responsive extension.

The idea is to hide the last columns of the table based on the width of the window or screen, and then place these hidden data as subrows below the visible columns.

First, I set some breakpoints and toggle the visibility of the first 3, 5, or 7 columns (you can change this setting based on your needs) depending on the breakpoint. You can add as many breakpoints as you want to make the table more responsive.

const updateColumnVisibility = () => {
    const columns = table.getAllColumns(); // table being const table = useReactTable({...})
    columns.forEach((column, index) => {
        if (windowWidth < mediumBreakpoint) {
            column.toggleVisibility(index < 3);
        } else if (windowWidth < largeBreakpoint) {
            column.toggleVisibility(index < 5);
        } else if (windowWidth < extraLargeBreakpoint) {
            column.toggleVisibility(index < 7);
        } else {
            column.toggleVisibility(true);
        }
    });
};

When rendering the table, I only render the visible headers, creating a new column to make space for a clickable icon to expand and collapse the hidden data. In the body of the table, I render only the visible cells, and the hidden ones are rendered as new subrows below the visible main row.

<table>
    <head>
        {/* getHeaderGroups() only return the visible columns */}
        {table.getHeaderGroups().map((headerGroup) => (
            <tr key={headerGroup.id}>
                <th></th> {/* Column for expand/collapse icon */}
                {headerGroup.headers.map((header) => (
                    <th key={header.id}>{flexRender(header.column.columnDef.header, header.getContext())}</th>
                ))}
            </tr>
        ))}
    </thead>
    <tbody>
        {table.getRowModel().rows.map((row) => (
            <>
                <tr key={row.id}>
                    <td>
                        {hasHiddenColumns(row) && (
                            <button onClick={() => toggleRow(row.id)}>
                                <i></i> {/* expand/collapse icon */}
                            </button>
                        )}
                    </td>
                    {row.getVisibleCells().map((cell) => (
                        <td key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</td>
                    ))}
                </tr>
                {expandedRows[row.id] && (
                    <tr>
                        <td></td>
                        <td colSpan={row.getVisibleCells().length}>
                            {row
                                .getAllCells()
                                .filter((cell) => !cell.column.getIsVisible())
                                .map((cell) => (
                                    <div key={cell.id}>
                                        <strong>{cell.column.columnDef.header}: </strong>
                                        {flexRender(cell.column.columnDef.cell, cell.getContext())}
                                    </div>
                                ))}
                        </td>
                    </tr>
                )}
            </>
        ))}
    </tbody>
</table>;

I am using helper functions hasHiddenColumns() and toggleRow() to enable the expand/collapse feature.

const toggleRow = (rowId) => {
    setExpandedRows((prev) => ({
        ...prev,
        [rowId]: !prev[rowId],
    }));
};

const hasHiddenColumns = (row) => {
    return row.getAllCells().some((cell) => !cell.column.getIsVisible());
};

[freakyflow]

What is the recommended solution for making tan stack table responsive, i.e., showing less columns on smaller screens?