title: Table Props Provider

Table Props Provider

Use TablePropsProvider to set global defaults for all DataTable components in your application.

The provider values map to DataTable props/config. Type definitions live in Props.

Quick start


import { TablePropsProvider, DataTable } from "@kousta-ui/table";
import "@kousta-ui/table/esm/index.css";
import "@kousta-ui/components/esm/index.css";
 
function App() {
  return (
    <TablePropsProvider
      props={{
        table: { className: "app-table" },
        th: { className: "app-header" },
        td: { className: "app-cell" },
      }}
      actions={{
        edit: {
          title: "Edit",
          buttonProps: { variant: "primary", size: "sm" },
        },
        delete: {
          title: "Delete",
          buttonProps: { variant: "danger", size: "sm" },
        },
      }}
      toggleRows={true}
      disableContextMenu={false}
      icons={{
        toggleRows: "S/H",
        extraViewsTogle: "...",
        refresh: "Refresh",
        paginationPrev: "Prev",
        paginationNext: "Next",
        paginationDots: "…",
      }}
    >
      <DataTable
        data={[]}
        headers={{ name: { value: "name" } }}
        loading={false}
        title="Users"
        keyExtractor={(row: any) => row.id}
      />
    </TablePropsProvider>
  );
}

How merging works

Provider fills missing props: if a DataTable doesn’t pass a value locally, it can inherit it from the provider.
Local config wins: if a DataTable passes a local value, it takes precedence.
icons are merged: provider icons are merged with local config.icons.

Note For toggleRows, the provider value is applied only when the table does not set config.toggleRows locally.

Provider props (reference)

See:

Common fields:

props: forwarded to table elements (table/thead/tbody/tr/th/td)
actions: default action config (edit/delete)
toggleRows: boolean
disableContextMenu: boolean
noHead: boolean
icons: same shape as config.icons
viewComp: view component defaults
emptyTable / emptyRowIcon