Basic usage

Props

Name	Type	Default	Description
title	string	—	Table title shown in the header. Later it will also be used to fetch table config from local storage (when implemented).
loading	boolean	false	Shows the table loading UI.
data	T[]	—	Rows to display.
headers	THeader<T>	—	Column definitions (label -> how to read/render cell).
keyExtractor	(row: T) => string | number	—	Stable key for each row.
isStatic	boolean	—	Marks the table as “static” (no remote actions). Useful when you only use local data + local search/sort/filter.

Minimal example

import React from "react";
import { DataTable } from "@kousta-ui/table";

import "@kousta-ui/table/esm/index.css";
import "@kousta-ui/components/esm/index.css";

type Row = {
id: number;
title: string;
start_date: string;
};

export default function Example() {
const data: Row[] = [
  { id: 1, title: "First", start_date: "2026-01-01" },
  { id: 2, title: "Second", start_date: "2026-01-10" },
];

return (
  <DataTable<Row>
    title="Projects"
    loading={false}
    data={data}
    headers={{
      id: { value: "id" },
      title: { value: "title" },
      "start date": { value: "start_date" },
    }}
    config={{ props: { table: { style: { width: "100%" } } } }}
    keyExtractor={(row) => row.id}
  />
);
}

Preview

Headers

headers is an object where:

• the key is the column label
• the value defines how to render the cell

Each header supports:

• value: a key in your row object
• exec: a function (row) => ReactNode
• visible: whether the column is currently shown (controlled by the "S/H" menu)
• canSee: whether the column can be toggled at all

See THeaderValue<T>.

import React from "react";
import { DataTable } from "@kousta-ui/table";

import "@kousta-ui/table/esm/index.css";
import "@kousta-ui/components/esm/index.css";

type User = { id: number; name: string; email: string; role: string };

export default function Example() {
  const data: User[] = [
    { id: 1, name: "John", email: "john@example.com", role: "admin" },
  ];

  return (
    <DataTable<User>
      title="Users"
      loading={false}
      data={data}
      headers={{
        name: { value: "name" },
        email: {
          value: "email",
          visible: true,
        },
        role: {
          exec: (row) => row.role.toUpperCase(),
          canSee: false,
        },
      }}
      config={{ props: { table: { style: { width: "100%" } } } }}
      keyExtractor={(row) => row.id}
    />
  );
}

Preview

Loading state

Control loading with the loading boolean prop:

import React from "react";
import { DataTable } from "@kousta-ui/table";

import "@kousta-ui/table/esm/index.css";
import "@kousta-ui/components/esm/index.css";

export default function Example() {
  return (
    <DataTable
      title="Users"
      loading={true}
      data={[]}
      headers={{ name: { value: "name" } }}
      config={{ props: { table: { style: { width: "100%" } } } }}
    />
  );
}

Preview