Tables

Tables are essential in data-intensive applications, serving as the primary way for organizing and displaying data in a readable format using rows and columns. Their integration, however, is complex due to functionalities like sorting, filtering, and pagination. Refine's tables integration aims to make this process as simple as possible while providing as many real world features as possible out of the box. This guide will cover the basics of tables in Refine and how to use them.

Handling Data

useTable allows us to fetch data according to the sorter, filter, and pagination states. Under the hood, it uses useList for the fetch. Its designed to be headless, but Refine offers seamless integration with several popular UI libraries, simplifying the use of their table components.

TanStack Table (for Headless, Chakra UI, Mantine) - Documentation) - Example
Ant Design Table - Documentation - Example
Material UI DataGrid - Documentation - Example

Basic Usage

The usage of the useTable hooks may slightly differ between UI libraries, however, the core functionality of useTable hook in @refinedev/core stays consistent in all implementations. The useTable hook in Refine's core is the foundation of all the other useTable implementations.

1import React from "react";
2import { useTable, pageCount, pageSize, current, setCurrent } from "@refinedev/core";
3
4
5export const ProductTable: React.FC = () => {
6    const { tableQuery, pageCount, pageSize, current, setCurrent } = useTable<IProduct>({
7        resource: "products",
8        pagination: {
9            current: 1, 
10            pageSize: 10,
11        },
12    });
13    const posts = tableQuery?.data?.data ?? [];
14
15    if (tableQuery?.isLoading) {
16        return <div>Loading...</div>;
17    }
18
19    return (
20        <div style={{ padding:"8px" }}>
21            <h1>Products</h1>
22            <table>
23                <thead>
24                    <tr>
25                        <th>ID</th>
26                        <th>Name</th>
27                        <th>Price</th>
28                    </tr>
29                </thead>
30                <tbody>
31                    {posts.map((post) => (
32                        <tr key={post.id}>
33                            <td>{post.id}</td>
34                            <td>{post.name}</td>
35                            <td>{post.price}</td>
36                        </tr>
37                    ))}
38                </tbody>
39            </table>
40            <hr />
41            <p>Current Page: {current}</p>
42            <p>Page Size: {pageSize}</p>
43            <button
44              onClick={() => {
45                setCurrent(current - 1);
46              }}
47              disabled={current < 2}
48            >
49              Previous Page
50            </button>
51            <button
52              onClick={() => {
53                setCurrent(current + 1);
54              }}
55              disabled={current === pageCount}
56            >
57              Next Page
58            </button>
59        </div>
60    );
61};
62
63interface IProduct {
64    id: number;
65    name: string;
66    price: string;
67}

Check out Refine's useTable reference page to learn more about the usage and see it in action.

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}

Check out TanStack Table's useTable reference page to learn more about the usage and see it in action.

1import React from "react";
2import { useTable, FilterDropdown } from "@refinedev/antd";
3import { Table, Input } from "antd";
4
5export const ProductTable: React.FC = () => {
6    const { tableProps } = useTable<IProduct>({
7        resource: "products",
8        filters: {
9            initial: [
10                {
11                    field: "name",
12                    operator: "contains",
13                    value: "",
14                },
15            ],
16        },
17    });
18
19    return (
20        <div style={{ padding: "4px" }}>
21            <h2>Products</h2>
22            <Table {...tableProps} rowKey="id">
23                <Table.Column
24                    dataIndex="id"
25                    title="ID"
26                    sorter={{ multiple: 2 }}
27                />
28                <Table.Column
29                    dataIndex="name"
30                    title="Name"
31                    filterDropdown={(props) => (
32                        <FilterDropdown {...props}>
33                            <Input placeholder="Search by name" />
34                        </FilterDropdown>
35                    )}
36                />
37                <Table.Column
38                    dataIndex="price"
39                    title="Price"
40                    sorter={{ multiple: 1 }}
41                />
42            </Table>
43        </div>
44    );
45};
46
47interface IProduct {
48    id: number;
49    name: string;
50    price: string;
51    material: string;
52}

Check out Ant Design's useTable reference page to learn more about the usage and see it in action.

1import React from "react";
2import { useDataGrid } from "@refinedev/mui";
3import { DataGrid, GridColDef } from "@mui/x-data-grid";
4
5export const ProductTable: React.FC = () => {
6    const { dataGridProps } = useDataGrid<IProduct>({
7        resource: "products",
8    });
9
10    const columns = React.useMemo<GridColDef<IProduct>[]>(
11        () => [
12            {
13                field: "id",
14                headerName: "ID",
15                type: "number",
16                width: 50,
17            },
18            { field: "name", headerName: "Name", minWidth: 400, flex: 1 },
19            { field: "price", headerName: "Price", minWidth: 120, flex: 0.3 },
20        ],
21        [],
22    );
23
24    return (
25        <div style={{ padding:"4px" }}>
26            <h2>Products</h2>
27            <DataGrid {...dataGridProps} columns={columns} />
28        </div>
29    );
30};
31
32interface IProduct {
33    id: number;
34    name: string;
35    price: string;
36}

Check out Material UI's useDataGrid reference page to learn more about the usage and see it in action.

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}

Check out TanStack Table's useTable reference page to learn more about the usage and see it in action.

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}

Check out TanStack Table's useTable reference page to learn more about the usage and see it in action.

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

useTable has a pagination feature. The pagination is done by passing the current, pageSize and, mode keys to pagination object.

current: The page index.
pageSize: The number of items per page.
mode: Whether to use server side pagination or not.
- When server is selected, the pagination will be handled on the server side.
- When client is selected, the pagination will be handled on the client side. No request will be sent to the server.
- When off is selected, the pagination will be disabled. All data will be fetched from the server.

You can also change the current and pageSize values by using the setCurrent and setPageSize functions that are returned by the useTable hook. Every change will trigger a new fetch.

1import React from "react";
2import { useTable } from "@refinedev/core";
3
4export const ProductTable: React.FC = () => {
5  const { tableQuery, pageCount, pageSize, current, setCurrent } = useTable<IProduct>({
6    resource: "products",
7    pagination: {
8        current: 1, 
9        pageSize: 10,
10        mode: "server", // "client" or "server"
11    },
12  });
13  const posts = tableQuery?.data?.data ?? [];
14
15  if (tableQuery?.isLoading) {
16    return <div>Loading...</div>;
17  }
18
19  return (
20    <div>
21      <h1>Products</h1>
22      <table>
23        <thead>
24          <tr>
25            <th>ID</th>
26            <th>Name</th>
27            <th>Price</th>
28          </tr>
29        </thead>
30        <tbody>
31          {posts.map((post) => (
32            <tr key={post.id}>
33              <td>{post.id}</td>
34              <td>{post.name}</td>
35              <td>{post.price}</td>
36            </tr>
37          ))}
38        </tbody>
39      </table>
40      <hr />
41      <p>Current Page: {current}</p>
42      <p>Page Size: {pageSize}</p>
43      <button
44        onClick={() => {
45          setCurrent(current - 1);
46        }}
47        disabled={current < 2}
48      >
49        Previous Page
50      </button>
51      <button
52        onClick={() => {
53          setCurrent(current + 1);
54        }}
55        disabled={current === pageCount}
56      >
57        Next Page
58      </button>
59    </div>
60  );
61};
62
63interface IProduct {
64    id: number;
65    name: string;
66    price: string;
67}

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

useTable has a filter feature. The filter is done by using the initial, permanent, defaultBehavior and mode keys to filters object.

These states are a CrudFilters type for creating complex single or multiple queries.

initial: The initial filter state. It can be changed by the setFilters function.
permanent: The default and unchangeable filter state. It can't be changed by the setFilters function.
defaultBehavior: The default behavior of the setFilters function.
- When merge is selected, the new filters will be merged with the old ones.
- When replace is selected, the new filters will replace the old ones. It means that the old filters will be deleted.
mode: Whether to use server side filter or not.
- When server is selected, the filters will be sent to the server.
- When off is selected, the filters will be applied on the client side.

useTable will pass these states to dataProvider for making it possible to fetch the data you need. Handling and adapting these states for API requests is the responsibility of the dataProvider

1import React from "react";
2import { useTable } from "@refinedev/core";
3
4
5export const ProductTable: React.FC = () => {
6  const { tableQuery, filters, setFilters } = useTable<IProduct>({
7      resource: "products",
8      filters: {
9          permanent: [
10              {
11                  field: "price",
12                  value: "200",
13                  operator: "lte",
14              },
15          ],
16          initial: [{ field: "category.id", operator: "eq", value: "1" }],
17      },
18  });
19  const products = tableQuery?.data?.data ?? [];
20
21  const getFilterByField = (field: string) => {
22      return filters.find((filter) => {
23          if ("field" in filter && filter.field === field) {
24              return filter;
25          }
26      }) as LogicalFilter | undefined;
27  };
28
29  const resetFilters = () => {
30    setFilters([], "replace");
31  };
32
33
34  if (tableQuery.isLoading) {
35      return <div>Loading...</div>;
36  }
37
38  return (
39      <div>
40          <h1>Products with price less than 200</h1>
41          <table>
42              <thead>
43                  <tr>
44                      <th>ID</th>
45                      <th>Name</th>
46                      <th>Price</th>
47                      <th>categoryId</th>
48                  </tr>
49              </thead>
50              <tbody>
51                  {products.map((product) => (
52                      <tr key={product.id}>
53                          <td>{product.id}</td>
54                          <td>{product.name}</td>
55                          <td>{product.price}</td>
56                          <td>{product.category.id}</td>
57                      </tr>
58                  ))}
59              </tbody>
60          </table>
61          <hr />
62          Filtering by field:
63          <b>
64              {getFilterByField("category.id")?.field}, operator{" "}
65              {getFilterByField("category.id")?.operator}, value
66              {getFilterByField("category.id")?.value}
67          </b>
68          <br />
69          <button
70              onClick={() => {
71                  setFilters([
72                      {
73                          field: "category.id",
74                          operator: "eq",
75                          value:
76                              getFilterByField("category.id")?.value === "1"
77                                  ? "2"
78                                  : "1",
79                      },
80                  ]);
81              }}
82          >
83              Toggle Filter
84          </button>
85          <button onClick={resetFilters}>Reset filter</button>
86      </div>
87  );
88};
89
90interface IProduct {
91  id: number;
92  name: string;
93  price: string;
94  category: {
95      id: number;
96  };
97}

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

useTable has a sorter feature. The sorter is done by passing the initial and permanent keys to sorters object. These states are a CrudSorter type for creating single or multiple queries.

initial: The initial sorter state. It can be changed by the setSorters function.
permanent: The default and unchangeable sorter state. It can't be changed by the setSorters function.

useTable will pass these states to dataProvider for making it possible to fetch the data you need. Handling and adapting these states for API requests is the responsibility of the dataProvider

You can change the sorters state by using the setSorters function. Every change will trigger a new fetch.

1import React from "react";
2import { useTable } from "@refinedev/core";
3
4export const ProductTable: React.FC = () => {
5    const { tableQuery, sorters, setSorters } = useTable<IProduct>({
6        resource: "products",
7        sorters: {
8            initial: [{ field: "price", order: "asc" }],
9        },
10    });
11    const products = tableQuery?.data?.data ?? [];
12
13    const findSorterByFieldName = (fieldName: string) => {
14        return sorters.find((sorter) => sorter.field === fieldName);
15    };
16
17
18    if (tableQuery.isLoading) {
19        return <div>Loading...</div>;
20    }
21    
22    return (
23        <div>
24            <h1>Products</h1>
25            <table>
26                <thead>
27                    <tr>
28                        <th>ID</th>
29                        <th>Name</th>
30                        <th>Price</th>
31                    </tr>
32                </thead>
33                <tbody>
34                    {products.map((product) => (
35                        <tr key={product.id}>
36                            <td>{product.id}</td>
37                            <td>{product.name}</td>
38                            <td>{product.price}</td>
39                        </tr>
40                    ))}
41                </tbody>
42            </table>
43            <hr />
44            <hr />
45            Sorting by field:
46            <b>
47                {findSorterByFieldName("price")?.field}, order{" "}
48                {findSorterByFieldName("price")?.order}
49            </b>
50            <br />
51            <button
52                onClick={() => {
53                    setSorters([
54                        {
55                            field: "price",
56                            order:
57                                findSorterByFieldName("price")?.order === "asc"
58                                    ? "desc"
59                                    : "asc",
60                        },
61                    ]);
62                }}
63            >
64                Toggle Sort
65            </button>
66        </div>
67    );
68};
69
70interface IProduct {
71    id: number;
72    name: string;
73    price: string;
74}

Search

useTable has a search feature with onSearch. The search is done by using the onSearch function with searchFormProps. These feature enables you to easily connect form state to the table filters.

onSearch: function is triggered when the searchFormProps.onFinish is called. It receives the form values as the first argument and expects a promise that returns a CrudFilters type.
searchFormProps: Has necessary props for the <form>.

For example we can fetch product with the name that contains the search value.

Ant Design
Material UI

1import React from "react";
2import { HttpError } from "@refinedev/core";
3import { useTable } from "@refinedev/antd";
4import { Button, Form, Input, Space, Table } from "antd";
5
6export const ProductTable: React.FC = () => {
7    const { tableProps, searchFormProps } = useTable<
8        IProduct,
9        HttpError,
10        IProduct
11    >({
12        resource: "products",
13        onSearch: (values) => {
14            return [
15                {
16                    field: "name",
17                    operator: "contains",
18                    value: values.name,
19                },
20            ];
21        },
22    });
23
24    return (
25        <div style={{ padding: "4px" }}>
26            <h2>Products</h2>
27            <Form {...searchFormProps}>
28                <Space>
29                    <Form.Item name="name">
30                        <Input placeholder="Search by name" />
31                    </Form.Item>
32                    <Form.Item>
33                        <Button htmlType="submit">Search</Button>
34                    </Form.Item>
35                </Space>
36            </Form>
37            <Table {...tableProps} rowKey="id">
38                <Table.Column dataIndex="id" title="ID" />
39                <Table.Column dataIndex="name" title="Name" />
40                <Table.Column dataIndex="price" title="Price" />
41            </Table>
42        </div>
43    );
44};
45
46interface IProduct {
47    id: number;
48    name: string;
49    price: string;
50}

Check out Ant Design's useTable reference page to learn more about the usage and see it in action.

1import React from "react";
2import { useDataGrid } from "@refinedev/mui";
3import { DataGrid, GridColDef } from "@mui/x-data-grid";
4import { HttpError } from "@refinedev/core";
5import Typography from "@mui/material/Typography";
6import Box from "@mui/material/Box";
7import Button from "@mui/material/Button";
8import Input from "@mui/material/Input";
9
10export const ProductTable: React.FC = () => {
11  const { dataGridProps, search } = useDataGrid<
12      IProduct,
13      HttpError,
14      Partial<IProduct>
15  >({
16      onSearch: (values) => {
17          return [
18              {
19                  field: "name",
20                  operator: "contains",
21                  value: values.name,
22              },
23          ];
24      },
25      resource: "products",
26  });
27
28  const columns = React.useMemo<GridColDef<IProduct>[]>(
29      () => [
30          {
31              field: "id",
32              headerName: "ID",
33              type: "number",
34              width: 50,
35          },
36          { field: "name", headerName: "Name", minWidth: 400, flex: 1 },
37          { field: "price", headerName: "Price", minWidth: 120, flex: 0.3 },
38      ],
39      [],
40  );
41
42  return (
43        <div style={{ padding: "4px" }}>
44            <Typography variant="h4" component="h2">
45                Products
46            </Typography>
47            <Box sx={{ mt: 2 }}>
48                <form
49                    onSubmit={(e) => {
50                        e.preventDefault();
51                        const target = e.target as typeof e.target & {
52                            name: { value: string };
53                        };
54                        search({ name: target.name.value });
55                    }}
56                >
57                    <Input placeholder="Search by name" name="name" />
58                    <Button type="submit">Search</Button>
59                </form>
60            </Box>
61            <DataGrid {...dataGridProps} columns={columns} sx={{ mt: 2 }} />
62        </div>
63  );
64};
65
66interface IProduct {
67  id: number;
68  name: string;
69  price: string;
70}

Check out Material UI's useDataGrid reference page to learn more about the usage and see it in action.

Integrating with Routers

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

useTable can infer current resource from the current route based on your resource definitions. This eliminates the need of passing these parameters to the hooks manually.

useTable({
  // When the current route is `/products`, the resource prop can be omitted.
  resource: "products",
});

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

Globally Configurable
This value can be configured globally. Click to see the guide for more information.

When you use the syncWithLocation feature, the useTable's state (e.g., sort order, filters, pagination) is automatically encoded in the query parameters of the URL, and when the URL changes, the useTable state is automatically updated to match. This makes it easy to share table state across different routes or pages, and to allow users to bookmark or share links to specific table views.

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

Refine handles data relations with data hooks(eg: useOne, useMany, etc.). This compositional design allows you to flexibly and efficiently manage data relationships to suit your specific requirements.

For example imagine each post has a many category. We can fetch the categories of the post by using the useMany hook.

1import React from "react";
2import { useTable, HttpError, useMany } from "@refinedev/core";
3
4export const HomePage: React.FC = () => {
5    const { tableQuery } = useTable<IPost, HttpError>({
6        resource: "posts",
7    });
8    const posts = tableQuery?.data?.data ?? [];
9
10    const categoryIds = posts.map((item) => item.category.id);
11    const { data: categoriesData, isLoading } = useMany<ICategory>({
12        resource: "categories",
13        ids: categoryIds,
14        queryOptions: {
15            enabled: categoryIds.length > 0,
16        },
17    });
18
19    if (tableQuery?.isLoading) {
20        return <div>Loading...</div>;
21    }
22
23    return (
24        <div>
25            <h1>Posts</h1>
26            <table>
27                <thead>
28                    <tr>
29                        <th>ID</th>
30                        <th>Title</th>
31                        <th>Category</th>
32                    </tr>
33                </thead>
34                <tbody>
35                    {posts.map((post) => (
36                        <tr key={post.id}>
37                            <td>{post.id}</td>
38                            <td>{post.title}</td>
39                            <td>
40                                {isLoading ? (
41                                    <div>Loading...</div>
42                                ) : (
43                                    categoriesData?.data.find(
44                                        (item) => item.id === post.category.id,
45                                    )?.title
46                                )}
47                            </td>
48                        </tr>
49                    ))}
50                </tbody>
51            </table>
52        </div>
53    );
54};
55
56interface IPost {
57    id: number;
58    title: string;
59    category: {
60        id: number;
61    };
62}
63
64interface ICategory {
65    id: number;
66    title: string;
67}

Handling Data​

Basic Usage​

Pagination Check the guidePlease check the guide for more information on this topic.​

Filtering Check the guidePlease check the guide for more information on this topic.​

Sorting Check the guidePlease check the guide for more information on this topic.​

Search​

Integrating with Routers​

Resource Router IntegratedThis value can be inferred from the route. Click to see the guide for more information.​

Sync with Location Router IntegratedThis value can be inferred from the route. Click to see the guide for more information. Globally ConfigurableThis value can be configured globally. Click to see the guide for more information.​

Relationships Check the guidePlease check the guide for more information on this topic.​

Handling Data

Basic Usage

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

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

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

Search

Integrating with Routers

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

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

Globally Configurable
This value can be configured globally. Click to see the guide for more information.

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