Responsive Collapse of Columns #3259
Replies: 14 comments 7 replies
-
DId you end up finding solution to this ? |
Beta Was this translation helpful? Give feedback.
-
No. This seems to be a rare feature, and hardly anyone asks for it. It is provided in jQuery DataTables though. |
Beta Was this translation helpful? Give feedback.
-
i'm also looking for that |
Beta Was this translation helpful? Give feedback.
-
Same, sad times |
Beta Was this translation helpful? Give feedback.
-
Same here. |
Beta Was this translation helpful? Give feedback.
-
Same, even now in November 2023 😢 |
Beta Was this translation helpful? Give feedback.
-
Same here, and it's December 2023 😭 |
Beta Was this translation helpful? Give feedback.
-
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:
Now, in the column definition, the meta property will contain the added className property:
Make sure to pass the property value to the components:
This solution allows you to use the className property within the meta object to control the visibility of columns based on breakpoints. |
Beta Was this translation helpful? Give feedback.
-
I did this and worked for me
also created a type for it
|
Beta Was this translation helpful? Give feedback.
-
Would be great if there were a native solution to this. |
Beta Was this translation helpful? Give feedback.
-
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 const toggleRow = (rowId) => {
setExpandedRows((prev) => ({
...prev,
[rowId]: !prev[rowId],
}));
};
const hasHiddenColumns = (row) => {
return row.getAllCells().some((cell) => !cell.column.getIsVisible());
}; |
Beta Was this translation helpful? Give feedback.
-
What is the recommended solution for making tan stack table responsive, i.e., showing less columns on smaller screens? |
Beta Was this translation helpful? Give feedback.
-
I just added the date attribute inside the td tag. |
Beta Was this translation helpful? Give feedback.
-
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
Beta Was this translation helpful? Give feedback.
All reactions