DataTable

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

<DataTableDemo />

Usage

import {
  DataTable,
  DataTableColumnDef,
  DataTableQuery,
  DataTableSort,
  useDataTable,
  EmptyFilterValue
} from "@raystack/apsara";

DataTable Props

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

DataTableQuery Interface

Prop	Type	Default
`filters`	`{ name: string; operator: FilterOperatorTypes; value: any; }[]`	-
`sort`	`{ key: string; order: "asc" \| "desc"; }[]`	-
`group_by`	`string[]`	-
`search`	`string`	-

DataTableColumn Interface

Prop	Type	Default
`accessorKey`	`string`	-
`header`	`string`	-
`columnType`	`"number" \| "text" \| "date" \| "select"`	-
`enableSorting`	`boolean`	-
`enableColumnFilter`	`boolean`	-
`enableHiding`	`boolean`	-
`enableGrouping`	`boolean`	-
`filterOptions`	`FilterSelectOption[]`	-
`defaultHidden`	`boolean`	-

Examples

Basic Usage

import { DataTable } from "@raystack/apsara";
 
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>
  );
}

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>
    ),
  },
];

Using DataTable Filter

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

<DataTable
data={data}
query={query}
columns={columns}
mode="server"
onTableQueryChange={handleQueryChange}>
    <DataTable.Filters />
</DataTable>

Using DataTable Display Controls

The DataTable.DisplayControls component can be used separately to display the display controls for custom views.

<DataTable
data={data}
query={query}
columns={columns}
mode="server"
onTableQueryChange={handleQueryChange}>
  <DataTable.DisplayControls />
</DataTable>

DataTableCopy Markdown

On this page

DataTable