DataTable

An advanced React table that supports filtering, sorting, and pagination out of the box.
1<DataTableDemo />

Usage

1import {
2  DataTable,
3  DataTableColumnDef,
4  DataTableQuery,
5  DataTableSort,
6  useDataTable,
7  EmptyFilterValue
8} from "@raystack/apsara";

DataTable Props

Prop

Type

DataTableQuery Interface

Prop

Type

DataTableColumn Interface

Prop

Type

Examples

Basic Usage

1import { DataTable } from "@raystack/apsara";
2

3const columns = [
4  {
5    accessorKey: "name",
6    header: "Name",
7    columnType: "text",
8    enableSorting: true,
9  },
10  {
11    accessorKey: "age",
12    header: "Age",
13    columnType: "number",
14    enableSorting: true,
15  },
16];
17const data = [
18  { name: "John Doe", age: 30 },
19  { name: "Jane Smith", age: 25 },
20];
21function MyTable() {
22  return (
23    <DataTable
24      columns={columns}
25      data={data}
26      defaultSort={{ key: "name", order: "asc" }}>
27      <DataTable.Toolbar />
28      <DataTable.Content />
29    </DataTable>
30  );
31}

Column Configuration

Columns can be configured with various options:

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

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:

1const columns = [
2  {
3    accessorKey: "name",
4    header: "Name",
5    enableSorting: true,
6  },
7];

Grouping

Group rows by same column data:

1const columns = [
2  {
3    accessorKey: "category",
4    header: "Category",
5    enableGrouping: true,
6    showGroupCount: true,
7  },
8];

Server-side Integration

1function ServerTable() {
2  const [data, setData] = useState([]);
3  const [query, setQuery] = useState();
4  const [isLoading, setIsLoading] = useState(false);
5  const handleQueryChange = async (query: DataTableQuery) => {
6    setIsLoading(true);
7    setQuery(query);
8    const response = await fetchData(query);
9    setData(response.data);
10    setIsLoading(false);
11  };
12  return (
13    <DataTable
14      data={data}
15      query={query}
16      columns={columns}
17      isLoading={isLoading}
18      mode="server"
19      onTableQueryChange={handleQueryChange}>
20      <DataTable.Toolbar />
21      <DataTable.Content />
22    </DataTable>
23  );
24}

Custom Styling

1const columns = [
2  {
3    accessorKey: "name",
4    header: "Name",
5    classNames: {
6      cell: "custom-cell",
7      header: "custom-header",
8    },
9    styles: {
10      cell: { fontWeight: "bold" },
11      header: { backgroundColor: "#f5f5f5" },
12    },
13  },
14];

Custom Cell Rendering

1const columns = [
2  {
3    accessorKey: "status",
4    header: "Status",
5    cell: ({ row }) => (
6      <Badge status={row.original.status}>{row.original.status}</Badge>
7    ),
8  },
9];

Using DataTable Filter

The DataTable.Filters component can be used separately to filter data for custom views.

1<DataTable
2data={data}
3query={query}
4columns={columns}
5mode="server"
6onTableQueryChange={handleQueryChange}>
7    <DataTable.Filters />
8</DataTable>