Tanstack React Table integration for refine

Tanstack React Table is a headless table library, which means it does not ship with components, markup or styles

refine is headless by design, offering unlimited styling and customization options. Moreover, refine ships with ready-made integrations for Ant Design, Material UI, Mantine, and Chakra UI for convenience.

refine has connectors for 15+ backend services, including REST API, GraphQL, and popular services like Airtable, Strapi, Supabase, Firebase, and NestJS.

Installation & Usage

``
npm install @refinedev/react-table @tanstack/react-table
`

`tsx
import { useTable } from "@refinedev/react-table";

import { ColumnDef, flexRender } from "@tanstack/react-table";

const EditPost = () => {
const columns =
React.useMemo <
ColumnDef <
IPost >
[] >
(() => [
{
id: "id",
header: "ID",
accessorKey: "id",
},
{
id: "title",
header: "Title",
accessorKey: "title",
meta: {
filterOperator: "contains",
},
},
],
[]);

const tableInstance = useTable({
columns,
refineCoreProps: {
resource: "posts",
},
});

return; / ... /
};
``

Documentation

- For more detailed information and usage, refer to the refine TanStack React Table documentation).
- Refer to TanStack React Table example with refine.
- Refer to documentation for more info about refine.
- Step up to refine tutorials.