TanStack Table
Check the guide
Please check the guide for more information on this topic.

Router Integrated
This value can be inferred from the route. Click to see the guide for more information.

Refine provides an integration package for TanStack Table library. This package enables you to manage your tables in a headless manner. This adapter supports all of the features of both TanStack Table and Refine's useTable hook (sorting, filtering pagination etc). Simply, you can use any of the TanStack Table examples as-is by copying and pasting them into your project.

Installation

Install the @refinedev/react-table library.

npm
pnpm
yarn

npm i @refinedev/react-table

pnpm add @refinedev/react-table

yarn add @refinedev/react-table

Usage

Let's see how to display a table with useTable hook.

We provide implementation examples for the Mantine and Chakra UI. If you using a different ui library, you can use the headless example as a starting point.

Headless
MantineTanStack Table
Chakra UITanStack Table

1import React from "react";
2import { useTable } from "@refinedev/react-table";
3import { ColumnDef, flexRender } from "@tanstack/react-table";
4
5export const ProductTable: React.FC = () => {
6    const columns = React.useMemo<ColumnDef<IProduct>[]>(
7        () => [
8            {
9                id: "id",
10                header: "ID",
11                accessorKey: "id",
12                meta: {
13                    filterOperator: "eq",
14                },
15            },
16            {
17                id: "name",
18                header: "Name",
19                accessorKey: "name",
20                meta: {
21                    filterOperator: "contains",
22                },
23            },
24            {
25                id: "price",
26                header: "Price",
27                accessorKey: "price",
28                meta: {
29                    filterOperator: "eq",
30                },
31            },
32        ],
33        [],
34    );
35
36    const {
37        getHeaderGroups,
38        getRowModel,
39        getState,
40        setPageIndex,
41        getCanPreviousPage,
42        getPageCount,
43        getCanNextPage,
44        nextPage,
45        previousPage,
46        setPageSize,
47    } = useTable<IProduct>({
48        refineCoreProps: {
49            resource: "products",
50        },
51        columns,
52    });
53
54    return (
55        <div>
56            <h1>Products</h1>
57            <table>
58                <thead>
59                    {getHeaderGroups().map((headerGroup) => (
60                        <tr key={headerGroup.id}>
61                            {headerGroup.headers.map((header) => {
62                                return (
63                                    <th key={header.id}>
64                                        {header.isPlaceholder ? null : (
65                                            <>
66                                                <div
67                                                    onClick={header.column.getToggleSortingHandler()}
68                                                >
69                                                    {flexRender(
70                                                        header.column.columnDef
71                                                            .header,
72                                                        header.getContext(),
73                                                    )}
74                                                    {{
75                                                        asc: " 🔼",
76                                                        desc: " 🔽",
77                                                    }[
78                                                        header.column.getIsSorted() as string
79                                                    ] ?? " ↕️"}
80                                                </div>
81                                            </>
82                                        )}
83                                        {header.column.getCanFilter() ? (
84                                            <div>
85                                                <input
86                                                    value={
87                                                        (header.column.getFilterValue() as string) ??
88                                                        ""
89                                                    }
90                                                    onChange={(e) =>
91                                                        header.column.setFilterValue(
92                                                            e.target.value,
93                                                        )
94                                                    }
95                                                />
96                                            </div>
97                                        ) : null}
98                                    </th>
99                                );
100                            })}
101                        </tr>
102                    ))}
103                </thead>
104                <tbody>
105                    {getRowModel().rows.map((row) => {
106                        return (
107                            <tr key={row.id}>
108                                {row.getVisibleCells().map((cell) => {
109                                    return (
110                                        <td key={cell.id}>
111                                            {flexRender(
112                                                cell.column.columnDef.cell,
113                                                cell.getContext(),
114                                            )}
115                                        </td>
116                                    );
117                                })}
118                            </tr>
119                        );
120                    })}
121                </tbody>
122            </table>
123
124            <div>
125                <button
126                    onClick={() => setPageIndex(0)}
127                    disabled={!getCanPreviousPage()}
128                >
129                    {"<<"}
130                </button>
131                <button
132                    onClick={() => previousPage()}
133                    disabled={!getCanPreviousPage()}
134                >
135                    {"<"}
136                </button>
137                <button onClick={() => nextPage()} disabled={!getCanNextPage()}>
138                    {">"}
139                </button>
140                <button
141                    onClick={() => setPageIndex(getPageCount() - 1)}
142                    disabled={!getCanNextPage()}
143                >
144                    {">>"}
145                </button>
146                <span>
147                    Page
148                    <strong>
149                        {getState().pagination.pageIndex + 1} of{" "}
150                        {getPageCount()}
151                    </strong>
152                </span>
153                <span>
154                    | Go to page:
155                    <input
156                        type="number"
157                        defaultValue={getState().pagination.pageIndex + 1}
158                        onChange={(e) => {
159                            const page = e.target.value
160                                ? Number(e.target.value) - 1
161                                : 0;
162                            setPageIndex(page);
163                        }}
164                    />
165                </span>{" "}
166                <select
167                    value={getState().pagination.pageSize}
168                    onChange={(e) => {
169                        setPageSize(Number(e.target.value));
170                    }}
171                >
172                    {[10, 20, 30, 40, 50].map((pageSize) => (
173                        <option key={pageSize} value={pageSize}>
174                            Show {pageSize}
175                        </option>
176                    ))}
177                </select>
178            </div>
179        </div>
180    );
181};
182
183interface IProduct {
184    id: number;
185    name: string;
186    price: string;
187}

1import React from "react";
2import { useTable } from "@refinedev/react-table";
3import { ColumnDef, flexRender } from "@tanstack/react-table";
4import { Box, Group, Table, Pagination } from "@mantine/core";
5
6import { ColumnSorter } from "./column-sorter.tsx";
7import { ColumnFilter } from "./column-filter.tsx";
8
9export const ProductTable: React.FC = () => {
10    const columns = React.useMemo<ColumnDef<IProduct>[]>(
11        () => [
12            {
13                id: "id",
14                header: "ID",
15                accessorKey: "id",
16                meta: {
17                    filterOperator: "eq",
18                },
19            },
20            {
21                id: "name",
22                header: "Name",
23                accessorKey: "name",
24                meta: {
25                    filterOperator: "contains",
26                },
27            },
28            {
29                id: "price",
30                header: "Price",
31                accessorKey: "price",
32                meta: {
33                    filterOperator: "eq",
34                },
35            },
36        ],
37        [],
38    );
39
40    const {
41        getHeaderGroups,
42        getRowModel,
43        refineCore: { setCurrent, pageCount, current },
44    } = useTable({
45        refineCoreProps: {
46            resource: "products",
47        },
48        columns,
49    });
50
51    return (
52        <div style={{ padding: "4px" }}>
53            <h2>Products</h2>
54            <Table highlightOnHover>
55                <thead>
56                    {getHeaderGroups().map((headerGroup) => (
57                        <tr key={headerGroup.id}>
58                            {headerGroup.headers.map((header) => {
59                                return (
60                                    <th key={header.id}>
61                                        {!header.isPlaceholder && (
62                                            <Group spacing="xs" noWrap>
63                                                <Box>
64                                                    {flexRender(
65                                                        header.column.columnDef
66                                                            .header,
67                                                        header.getContext(),
68                                                    )}
69                                                </Box>
70                                                <Group spacing="xs" noWrap>
71                                                    <ColumnSorter
72                                                        column={header.column}
73                                                    />
74                                                    <ColumnFilter
75                                                        column={header.column}
76                                                    />
77                                                </Group>
78                                            </Group>
79                                        )}
80                                    </th>
81                                );
82                            })}
83                        </tr>
84                    ))}
85                </thead>
86                <tbody>
87                    {getRowModel().rows.map((row) => {
88                        return (
89                            <tr key={row.id}>
90                                {row.getVisibleCells().map((cell) => {
91                                    return (
92                                        <td key={cell.id}>
93                                            {flexRender(
94                                                cell.column.columnDef.cell,
95                                                cell.getContext(),
96                                            )}
97                                        </td>
98                                    );
99                                })}
100                            </tr>
101                        );
102                    })}
103                </tbody>
104            </Table>
105            <br />
106            <Pagination
107                position="right"
108                total={pageCount}
109                page={current}
110                onChange={setCurrent}
111            />
112        </div>
113    );
114};
115
116interface IProduct {
117    id: number;
118    name: string;
119    price: string;
120}

1import React from "react";
2import { useTable } from "@refinedev/react-table";
3import { ColumnDef, flexRender } from "@tanstack/react-table";
4import {
5    Table,
6    Thead,
7    Tbody,
8    Tr,
9    Th,
10    Td,
11    TableContainer,
12    HStack,
13    Text,
14} from "@chakra-ui/react";
15import { Pagination } from "./pagination";
16
17import { ColumnSorter } from "./column-sorter";
18import { ColumnFilter } from "./column-filter";
19
20export const ProductTable: React.FC = () => {
21    const columns = React.useMemo<ColumnDef<IProduct>[]>(
22        () => [
23            {
24                id: "id",
25                header: "ID",
26                accessorKey: "id",
27                meta: {
28                    filterOperator: "eq",
29                },
30            },
31            {
32                id: "name",
33                header: "Name",
34                accessorKey: "name",
35                meta: {
36                    filterOperator: "contains",
37                },
38            },
39            {
40                id: "price",
41                header: "Price",
42                accessorKey: "price",
43                meta: {
44                    filterOperator: "eq",
45                },
46            },
47        ],
48        [],
49    );
50
51    const {
52        getHeaderGroups,
53        getRowModel,
54        refineCore: { setCurrent, pageCount, current },
55    } = useTable({
56        refineCoreProps: {
57            resource: "products",
58        },
59        columns,
60    });
61
62    return (
63        <div style={{ padding:"8px" }}>
64            <Text fontSize='3xl'>Products</Text>
65            <TableContainer whiteSpace="pre-line">
66                <Table variant="simple">
67                    <Thead>
68                        {getHeaderGroups().map((headerGroup) => (
69                            <Tr key={headerGroup.id}>
70                                {headerGroup.headers.map((header) => (
71                                    <Th key={header.id}>
72                                        {!header.isPlaceholder && (
73                                            <HStack spacing="2">
74                                                <Text>
75                                                    {flexRender(
76                                                        header.column.columnDef
77                                                            .header,
78                                                        header.getContext(),
79                                                    )}
80                                                </Text>
81                                                <HStack spacing="2">
82                                                    <ColumnSorter
83                                                        column={header.column}
84                                                    />
85                                                    <ColumnFilter
86                                                        column={header.column}
87                                                    />
88                                                </HStack>
89                                            </HStack>
90                                        )}
91                                    </Th>
92                                ))}
93                            </Tr>
94                        ))}
95                    </Thead>
96                    <Tbody>
97                        {getRowModel().rows.map((row) => (
98                            <Tr key={row.id}>
99                                {row.getVisibleCells().map((cell) => (
100                                    <Td key={cell.id}>
101                                        {flexRender(
102                                            cell.column.columnDef.cell,
103                                            cell.getContext(),
104                                        )}
105                                    </Td>
106                                ))}
107                            </Tr>
108                        ))}
109                    </Tbody>
110                </Table>
111            </TableContainer>
112            <Pagination
113                current={current}
114                pageCount={pageCount}
115                setCurrent={setCurrent}
116            />
117        </div>
118    );
119};
120
121interface IProduct {
122    id: number;
123    name: string;
124    price: string;
125}

TanStack Table Check the guidePlease check the guide for more information on this topic. Router IntegratedThis value can be inferred from the route. Click to see the guide for more information.

Installation​

Usage​

TanStack Table
Check the guide
Please check the guide for more information on this topic.

Router Integrated
This value can be inferred from the route. Click to see the guide for more information.

Installation

Usage