DataTableA responsive data table component.

Assets

Status	Email	Amount
success	ken99@yahoo.com	$316.00
success	Abe45@gmail.com	$242.00
processing	Monserrat44@gmail.com	$837.00
success	Silas22@gmail.com	$874.00
failed	carmella@hotmail.com	$721.00

0 of 5 row(s) selected.

Install the component from your command line.

npm install @raystack/apsara

Basic Datatable

Import all parts and piece them together.

import { DataTable, useTable } from "@raystack/apsara";
import { ColumnDef } from "@tanstack/react-table";

const data: Payment[] = [
{
id: "m5gr84i9",
amount: 316,
status: "success",
email: "ken99@yahoo.com",
}
];

export type Payment = {
  id: string;
  amount: number;
  status: "pending" | "processing" | "success" | "failed";
  email: string;
};

export const columns: ApsaraColumnDef<Payment>[] = [
  {
    id: "select",
  },
  {
    accessorKey: "email",
    header: "Email",
    cell: ({ row }) => <div className="lowercase">{row.getValue("email")}</div>,
    filterVariant: "text",
  }
];

export const Assets = () => {
  return (
    <DataTable columns={columns} data={data}></DataTable>
  );
};

Reusable Components

Here are some components you can use to build your data tables

Datatable Toobar

Can be used to show search, filter & option items. some of sub components available are

DataTable.ClearFilter
DataTable.FilterOptions
DataTable.ViewOptions
DataTable.GloabalSearch etc.

<DataTable columns={columns} data={data}>
  <DataTable.Toolbar>
    <DataTable.ClearFilter /> 
    <DataTable.FilterOptions />
    <DataTable.ViewOptions />
    <DataTable.GloabalSearch placeholder="Search assets..." />
  </DataTable.Toolbar>
</DataTable>

Can be used to display any additional information.

<DataTable columns={columns} data={data}>
  <DataTable.Toolbar>
    <DataTable.ClearFilter /> 
    <DataTable.FilterOptions />
    <DataTable.ViewOptions />
    <DataTable.GloabalSearch placeholder="Search assets..." />
  </DataTable.Toolbar>
  <DataTable.Footer>
  </DataTable.Footer>
</DataTable>

Datatable usetable

usetable can be used to create any custom table components

const { filteredColumns, table } = useTable();
const isFiltered = filteredColumns.length > 0;

<Flex gap="small">
  {isFiltered ? <DataTable.ClearFilter /> : <DataTable.FilterOptions />}
  <DataTable.ViewOptions />
  <DataTable.GloabalSearch placeholder="Search assets..." />
</Flex>