Skip to content
FlexTable

Getting started — React

Install

Section titled “Install”
Terminal window
bun add @flextable/core @flextable/react @flextable/react-ui @tanstack/react-table

@flextable/react-ui is optional — it ships the default Button/Badge/Avatar/DropdownMenu primitives used by toReactColumnDef(). Bring your own by passing a components override instead (see Theming & slot overrides).

Define your entity

Section titled “Define your entity”

Any type with an id works — ColumnFactory only requires EntityLike ({ id: string | number }).

interface User {
  id: string;
  name: string;
  email: string;
  role: 'admin' | 'member';
  createdAt: string;
}

Build columns with ColumnFactory

Section titled “Build columns with ColumnFactory”
import { ColumnFactory } from '@flextable/core';
import { toReactColumnDef } from '@flextable/react';
import { useMemo } from 'react';


// A minimal TranslateFn — swap in `useTranslation().t` from react-i18next if you have it.
const t = (key: string) => key;


function useUserColumns() {
  return useMemo(() => {
    const factory = new ColumnFactory<User>(t);


    return [
      factory.select(),
      factory.name({
        accessorKey: 'name',
        getTitle: (user) => user.name,
        getDescription: (user) => user.email,
      }),
      factory.badge({
        accessorKey: 'role',
        headerKey: 'user.role',
        getVariant: (user) => (user.role === 'admin' ? 'default' : 'secondary'),
      }),
      factory.date({
        accessorKey: 'createdAt',
        headerKey: 'user.createdAt',
        formatDate: (value) => new Date(value).toLocaleDateString(),
      }),
      factory.actions({
        onEdit: (user) => console.log('edit', user),
        onDelete: (ids) => console.log('delete', ids),
      }),
    ].map((config) => toReactColumnDef<User>(config, { t }));
  }, []);
}

ColumnFactory returns framework-agnostic ColumnConfig descriptors; toReactColumnDef() is what turns each one into a real @tanstack/react-table ColumnDef, using @flextable/react-ui’s components by default.

Render the table

Section titled “Render the table”
import { FlexTable } from '@flextable/react';


function UsersTable({ users }: { users: Array<User> }) {
  const columns = useUserColumns();


  return <FlexTable columns={columns} data={users} t={t} />;
}

That’s a fully interactive table: sortable headers, client-side fuzzy search, pagination and row selection all work out of the box. From here: