af-utils / virtual

Table / Material UI

Loading example...

Col a	Col b	Col c
cell a 0	cell b 0	cell c 0
cell a 1	cell b 1	cell c 1
cell a 2	cell b 2	cell c 2
cell a 3	cell b 3	cell c 3
cell a 4	cell b 4	cell c 4
cell a 5	cell b 5	cell c 5
cell a 6	cell b 6	cell c 6
cell a 7	cell b 7	cell c 7

import { useVirtual, Table } from "@af-utils/react-table";

import MuiTableContainer from "@mui/material/TableContainer";
import MuiTable from "@mui/material/Table";
import MuiTableBody from "@mui/material/TableBody";
import MuiTableHead from "@mui/material/TableHead";
import MuiTableCell from "@mui/material/TableCell";
import MuiTableRow from "@mui/material/TableRow";

const components = {
    /*
        border-collapse works bad with sticky headers,
        so stickyHeader is a must unless your table is headless
    */
    Table: props => <MuiTable {...props} stickyHeader />,
    Tbody: MuiTableBody,
    Thead: MuiTableHead,
    Tr: MuiTableRow,
    Td: MuiTableCell,
    Th: MuiTableCell
};

const columns = [
    {
        key: "a",
        label: "Col a"
    },
    {
        key: "b",
        label: "Col b",
        align: "center"
    },
    {
        key: "c",
        label: "Col c",
        align: "right"
    }
];

const getRowData = i => ({
    a: `cell a ${i}`,
    b: `cell b ${i}`,
    c: `cell c ${i}`
});

const SimpleTable = () => {
    const model = useVirtual({
        itemCount: 100000
    });

    /*
        If you place Table inside block container,
        you must specify height: 100% by adding style/className.
    */
    return (
        <MuiTableContainer className="h-full not-prose">
            <Table
                className="h-full"
                model={model}
                components={components}
                getRowData={getRowData}
                columns={columns}
            />
        </MuiTableContainer>
    );
};

export default SimpleTable;