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

[thisisgurkaran]

DId you end up finding solution to this ?

[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

[reZerOR]

works for me too

[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?

[RuslanKharisov]

I just added the date attribute inside the td tag.
export const StockTableColumns: ColumnDef[] = [
{
accessorKey: "sku",
header: "Sku",
cell: ({ row, column }) => (
<div data-title={column.columnDef.header as string}>
{row.getValue("sku")}

),
},
...
and described css properties.
@media (max-width:770px) {
table thead tr {
display: none;
}
table tr {
display: block;
margin-bottom: 10px;
padding: 8px
}
table th, table td{
padding: 0.5em;
}
table td{
display: flex;
text-align:left;
font-size: 12px;
padding:3px !important;
}
table td button {
width: 50%;
}
table td div::before{
margin-bottom: 5px;
display: inline-block;
width: 75px;
color: #6C7A89;
padding-right: 20px;
content: attr(data-title);
text-align: left;
}
}

[braginteractive]

Here is my solution.. I collapse the columns on mobile similar to the collapse table examples on tailwind: https://tailwindui.com/components/application-ui/lists/tables

In my tables, I use a select checkbox as the first column, this is alway hidden on mobile. I then use the first column as the primary column. In this column I use a description list to show all the other columns on mobile.

By default, all columns show on mobile. I utilize the columns meta to add extra classes or identify any columns I dont want to show on mobile.

Here is my data-table.tsx

	<div className="space-y-4">
			<DataTableToolbar table={table} columns={columns} />
			<div className="dark:border-primary-10/50 rounded-md border">
				<Table>
					<TableHeader>
						{table.getHeaderGroups().map((headerGroup) => (
							<TableRow key={headerGroup.id}>
								{headerGroup.headers.map((header, index) => {
									// Primary column is always the first column (after select column)
									const isPrimary = index === 1
									// Primary columns are always visible, others hidden by default on mobile
									const defaultClasses = isPrimary ? '' : 'hidden lg:table-cell'
									const classes =
										header.column.columnDef.meta?.classes || defaultClasses

									return (
										<TableHead
											key={header.id}
											colSpan={header.colSpan}
											className={classes}
										>
											{header.isPlaceholder
												? null
												: flexRender(
														header.column.columnDef.header,
														header.getContext(),
													)}
										</TableHead>
									)
								})}
							</TableRow>
						))}
					</TableHeader>
					<TableBody>
						{table.getRowModel().rows?.length ? (
							table.getRowModel().rows.map((row) => (
								<TableRow
									key={row.id}
									data-state={row.getIsSelected() && 'selected'}
								>
									{row.getVisibleCells().map((cell, index) => {
										const isPrimary = index === 1
										const defaultClasses = isPrimary
											? ''
											: 'hidden lg:table-cell'
										const classes =
											cell.column.columnDef.meta?.classes || defaultClasses

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

												{/* Mobile-only description list */}
												{isPrimary && (
													<dl className="divide-primary-10/50 font-normal lg:hidden">
														{row
															.getVisibleCells()
															.filter((c, i) => {
																// Skip select column and primary column
																if (i === 0 || i === 1) {
																	return false
																}
																// Show in mobile collapse by default unless explicitly set to false
																return c.column.columnDef.meta?.mobile !== false
															})
															.map((c) => (
																<div key={c.id} className="py-2">
																	<dt className="text-primary/50">
																		{c.column.columnDef.meta?.title}
																	</dt>
																	<dd className="truncate">
																		{flexRender(
																			c.column.columnDef.cell,
																			c.getContext(),
																		)}
																	</dd>
																</div>
															))}
													</dl>
												)}
											</TableCell>
										)
									})}
								</TableRow>
							))
						) : (
							<TableRow>
								<TableCell
									colSpan={columns.length}
									className="h-24 text-center"
								>
									No results.
								</TableCell>
							</TableRow>
						)}
					</TableBody>
				</Table>
			</div>
			<DataTablePagination table={table} />
		</div>

Then in my columns.tsx

	columnHelper.accessor('companyStaff', {
		id: 'companyStaff',
		meta: { 
                      title: 'Staff ID', 
                     classes: '', // override responsive classes if needed
                     mobile: false // don't show this column in description list
                 },
		header: ({ column }) => (
			<DataTableColumnHeader column={column} title="ID" />
		),
		cell: ({ row }) => {
			return (
				<div className="flex flex-col items-start">
					<Badge variant="info">
						{row.getValue('companyStaff')}
					</Badge>
				</div>
			)
		},
		enableHiding: false,
		enableGrouping: false,
	}),

[collinsmarra]

This is awesome! It works

[HarshArora-1205]

🙇