DataTable

An advanced React table that supports filtering, sorting, and pagination out of the box.

<DataTableDemo />

Usage

The DataTable component is a powerful, flexible table that provides advanced features like sorting, filtering, grouping, and server-side data handling.

import { DataTable } from "@raystack/components/v1";
const columns = [
  {
    accessorKey: "name",
    header: "Name",
    columnType: "text",
    enableSorting: true,
  },
  {
    accessorKey: "age",
    header: "Age",
    columnType: "number",
    enableSorting: true,
  },
];
const data = [
  { name: "John Doe", age: 30 },
  { name: "Jane Smith", age: 25 },
];
function MyTable() {
  return (
    <DataTable
      columns={columns}
      data={data}
      defaultSort={{ key: "name", order: "asc" }}>
      <DataTable.Toolbar />
      <DataTable.Content />
    </DataTable>
  );
}

DataTable Props

PropTypeDefault
columns
any[]
-
data
T[]
-
mode
"client" | "server"
"client"
isLoading
boolean
false
defaultSort
any
-
query
DataTableQuery
-
onTableQueryChange
(query: DataTableQuery) => void
-
onLoadMore
() => Promise<void>
-

DataTableQuery Interface

PropTypeDefault
filters
{ name: string; operator: FilterOperatorTypes; value: any; }[]
-
sort
{ key: string; order: "asc" | "desc"; }[]
-
group_by
string[]
-
search
string
-

DataTableColumn Interface

PropTypeDefault
accessorKey
string
-
header
string
-
columnType
"number" | "text" | "date" | "select"
-
enableSorting
boolean
-
enableColumnFilter
boolean
-
enableHiding
boolean
-
enableGrouping
boolean
-
filterOptions
FilterSelectOption[]
-
defaultHidden
boolean
-

Examples

You can check live DataTable here.

Column Configuration

Columns can be configured with various options:

interface DataTableColumnDef<TData, TValue> {
  accessorKey: string; // Key to access data
  header: string; // Column header text
  columnType: "text" | "number" | "date" | "select"; // Data type
  enableSorting?: boolean; // Enable sorting
  enableColumnFilter?: boolean; // Enable filtering
  enableHiding?: boolean; // Enable column visibility toggle
  enableGrouping?: boolean; // Enable grouping
  filterOptions?: FilterSelectOption[]; // Options for select filter
  defaultHidden?: boolean; // Hide column by default
}

Filtering

The DataTable supports multiple filter types:

Filter types:

  • Text: equals, not equals, contains,
  • Number: equals, not equals, less than, less than or equal, greater than, greater than or equal
  • Date: equals, not equals, before, on or before, after, on or after
  • Select: equals, not equals

Sorting

Enable column sorting:

const columns = [
  {
    accessorKey: "name",
    header: "Name",
    enableSorting: true,
  },
];

Grouping

Group rows by same column data:

const columns = [
  {
    accessorKey: "category",
    header: "Category",
    enableGrouping: true,
    showGroupCount: true,
  },
];

Server-side Integration

function ServerTable() {
  const [data, setData] = useState([]);
  const [query, setQuery] = useState();
  const [isLoading, setIsLoading] = useState(false);
  const handleQueryChange = async (query: DataTableQuery) => {
    setIsLoading(true);
    setQuery(query);
    const response = await fetchData(query);
    setData(response.data);
    setIsLoading(false);
  };
  return (
    <DataTable
      data={data}
      query={query}
      columns={columns}
      isLoading={isLoading}
      mode="server"
      onTableQueryChange={handleQueryChange}>
      <DataTable.Toolbar />
      <DataTable.Content />
    </DataTable>
  );
}

Custom Styling

const columns = [
  {
    accessorKey: "name",
    header: "Name",
    classNames: {
      cell: "custom-cell",
      header: "custom-header",
    },
    styles: {
      cell: { fontWeight: "bold" },
      header: { backgroundColor: "#f5f5f5" },
    },
  },
];

Custom Cell Rendering

const columns = [
  {
    accessorKey: "status",
    header: "Status",
    cell: ({ row }) => (
      <Badge status={row.original.status}>{row.original.status}</Badge>
    ),
  },
];

On this page