It eliminates repetitive tasks in CRUD operations and provides industry-standard solutions for critical project components like authentication, access control, routing, networking, state management, and i18n.

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

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.