@rhc-shared-components/table-toolbar

A common toolbar for all connect tables, providing filters, search, pagination, and custom action items.

Install

npm install --save @rhc-shared-components/table-toolbar

Usage

import { TableToolbar } from "@rhc-shared-components/table-toolbar";
import type { IFilterConfig } from "@rhc-shared-components/table-toolbar";

const filterConfig: IFilterConfig[] = [
  {
    name: "status",
    label: "Status",
    options: [
      { text: "Active", value: "active" },
      { text: "Inactive", value: "inactive" },
    ],
  },
];

export const MyComponent = () => {
  return (
    <TableToolbar
      filterConfig={filterConfig}
      handleSearchChange={(value) => console.log(value)}
      searchPlaceHolder="Search..."
      totalItems={100}
      onPageUpdate={(page, perPage) => console.log(page, perPage)}
      showBottomPagination
    >
      <MyTable />
    </TableToolbar>
  );
};

Development

yarn dev       # Start dev server
yarn build     # Build library
yarn lint      # Check with Biome
yarn lint-fix  # Auto-fix lint issues