Designing a Responsive Table Layout
Show how to design a responsive table using React TanStack Table combined with React Bootstrap classes to ensure the table looks good on all device sizes.
import { useReactTable } from '@tanstack/react-table';
import { Table } from 'react-bootstrap';
import React from 'react';
Import necessary libraries. TanStack Table for table logic and React Bootstrap for styling.
const data = React.useMemo(() => [
// Define your data here
], []);
Define a memoized data array to pass into the table.
const columns = React.useMemo(() => [
// Define your columns here
], []);
Define a memoized columns array which includes header and accessor, which ties the column to the specific data key.
const tableInstance = useReactTable({
data,
columns,
});
Instantiate the table using useReactTable hook with the defined data and columns.
return (
<Table striped bordered hover size="sm" responsive>
<thead>
{tableInstance.getHeaderGroups().map(headerGroup => (
<tr key={headerGroup.id}>
{headerGroup.headers.map(column => (
<th key={column.id}>{column.render('Header')}</th>
))}
</tr>
))}
</thead>
<tbody>
{tableInstance.getRowModel().rows.map(row => (
<tr key={row.id}>
{row.getVisibleCells().map(cell => (
<td key={cell.id}>{cell.render('Cell')}</td>
))}
</tr>
))}
</tbody>
</Table>
);
Render the responsive table with React Bootstrap's Table component, integrating TanStack Table logic for rendering the header and body.