Skip to Content
TableDataTableActions

Actions

DataTable supports multiple kinds of actions:

  • Row actions (actions.edit, actions.delete)
  • Remote fetching (actions.get) for pagination/search refresh
  • Extra row actions (options.extraActions)
  • Bulk actions (options.bulkActions) when rows are selected
  • View actions (options.viewComp) to view/extend a row

Actions/options reference

NameTypeDefaultDescription
actions.get(params: TParams) => void—Fetch table data remotely. The table will call it with { page, limit, search } when pagination/search changes (when configured).
actions.edit{ onEdit(row); title?; buttonProps?; canEdit? }—Adds an edit action for each row (button + context menu).
actions.delete{ onDelete(row); title?; buttonProps?; canDelete? }—Adds a delete action for each row (button + context menu).
options.extraActionsArray<{ title; onClick(row); Icon?; allowed? }>—Adds additional per-row actions.
options.bulkActionsArray<{ title; onClick(rows, clearSelected); buttonProps?; valueExtractor?; canPerformAction? }>—Enables row selection + bulk actions UI.
options.selectFilterRecord<string, (row, clearAll?) => boolean>—Adds a “select menu” next to the header checkbox to select rows by named filters.
options.viewComp{ Component(row); type?: ”modal”`"extends"; openButtonProps?; canView?; … }`—

Type definitions: see Props.

Row actions (Edit / Delete)

Use actions.edit and/or actions.delete.

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" } }}
    actions={{
      edit: {
        title: "Edit",
        onEdit: (row) => console.log("Edit", row),
        canEdit: (row) => row.role === "admin",
      },
      delete: {
        title: "Delete",
        onDelete: (row) => console.log("Delete", row),
        canDelete: true,
      },
    }}
    config={{ props: { table: { style: { width: "100%" } } } }}
    keyExtractor={(row) => row.id}
  />
);
}
DESIGNATIONCATEGORY
Kousta UIUI
Table PackageTABLE

Extra actions

Use options.extraActions for additional per-row actions.

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; active: boolean };


export default function Example() {
const data: User[] = [
  { id: 1, name: "John", active: true },
  { id: 2, name: "Jane", active: false },
];


return (
  <DataTable<User>
    title="Users"
    loading={false}
    data={data}
    headers={{ name: { value: "name" }, active: { value: "active" } }}
    options={{
      extraActions: [
        {
          title: "Deactivate",
          allowed: (row) => row.active,
          onClick: (row) => console.log("Deactivate", row),
        },
      ],
    }}
    config={{ props: { table: { style: { width: "100%" } } } }}
    keyExtractor={(row) => row.id}
  />
);
}
DESIGNATIONCATEGORYACTIONS
Kousta UIUI
--
Table PackageTABLE
--

Bulk actions

Bulk actions become available when you enable row selection by providing options.bulkActions.

Tip You can optionally provide: valueExtractor (to compute an aggregate value from selected rows) and canPerformAction (to disable/enable a bulk action depending on selection/state).

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 };


export default function Example() {
const data: User[] = [
  { id: 1, name: "John" },
  { id: 2, name: "Jane" },
];


return (
  <DataTable<User>
    title="Users"
    loading={false}
    data={data}
    headers={{ name: { value: "name" } }}
    options={{
      bulkActions: [
        {
          title: "Export",
          onClick: (rows, clearSelected) => {
            console.log("Export", rows);
            clearSelected();
          },
        },
      ],
    }}
    config={{ props: { table: { style: { width: "100%" } } } }}
    keyExtractor={(row) => row.id}
  />
);
}
DESIGNATIONCATEGORY
Kousta UIUI
Table PackageTABLE
ComponentsUI
10

Showing 1 to 3, of 3

View component actions

Use options.viewComp to add a dedicated “view” action.

  • type: "extends" (default): expands an extra row under the current row
  • type: "modal": opens a modal showing the row details
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 };


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


return (
  <DataTable<User>
    title="Users"
    loading={false}
    data={data}
    headers={{ name: { value: "name" }, email: { value: "email" } }}
    options={{
      viewComp: {
        type: "extends",
        Component: (row) => (
          <div style={{ padding: 12 }}>
            <strong>{row.name}</strong> — {row.email}
          </div>
        ),
      },
    }}
    config={{ props: { table: { style: { width: "100%" } } } }}
    keyExtractor={(row) => row.id}
  />
);
}
DESIGNATIONCATEGORYACTIONS
Kousta UIUI
Table PackageTABLE

actions.get (remote fetching)

If you use server-side pagination and/or server-side search, provide actions.get. The table will call it with a params object that can include:

  • page (number)
  • limit (number)
  • search (string)

This is used by pagination controls and by search when actions.search.onSearch is not provided.

selectFilter (filter-based select all)

If you provide bulk actions, the table shows a “select all” checkbox column. When you also provide options.selectFilter, the header checkbox becomes a small menu that lets users select rows matching a named filter.

Example shape:

options={{
  bulkActions: [...],
  selectFilter: {
    "Active only": (row) => row.active === true,
    "Admins only": (row) => row.role === "admin",
  },
}}

Notes about afterEdit / afterDelete

actions.edit.afterEdit and actions.delete.afterDelete are present in types but are not implemented yet in the current DataTable behavior.

Last updated on
ViewsConfig