Master Table

Feature-rich data table with sorting, filtering, and preferences

SaaSData Display

Overview

MasterTable is a compound component for rendering data tables with server-side pagination, column sorting, filtering, row selection, bulk actions, column visibility, and column reordering. It uses a composable pattern with Toolbar, Header, Body, and Pagination sub-components.

Usage

import { MasterTable } from "@leanicon/web-builder-library/saas";

<MasterTable
  tableId="users"
  data={users}
  columns={columns}
  totalCount={totalCount}
  getRowId={(row) => row.id}
  pagination={pagination}
  onPaginationChange={setPagination}
  sorting={sorting}
  onSortingChange={setSorting}
  columnFilters={columnFilters}
  onColumnFiltersChange={setColumnFilters}
>
  <MasterTable.Toolbar />
  <table className="w-full caption-bottom text-sm">
    <MasterTable.Header />
    <MasterTable.Body />
  </table>
  <MasterTable.Pagination />
</MasterTable>;

Variants

Default

<SaaSDataDisplayMasterTable
  tableId="demo-default"
  data={[
    { id: "1", name: "Alice", email: "[email protected]", status: "active" },
    { id: "2", name: "Bob", email: "[email protected]", status: "inactive" },
    { id: "3", name: "Carol", email: "[email protected]", status: "pending" },
  ]}
  columns={[
    { accessorKey: "name", header: "Name" },
    { accessorKey: "email", header: "Email" },
    { accessorKey: "status", header: "Status" },
  ]}
  totalCount={3}
  getRowId={(row) => row.id}
  pagination={{ pageIndex: 0, pageSize: 10 }}
  onPaginationChange={() => {}}
  sorting={[]}
  onSortingChange={() => {}}
  columnFilters={[]}
  onColumnFiltersChange={() => {}}
>
  <SaaSDataDisplayMasterTable.Toolbar />
  <table className="w-full caption-bottom text-sm">
    <SaaSDataDisplayMasterTable.Header />
    <SaaSDataDisplayMasterTable.Body />
  </table>
  <SaaSDataDisplayMasterTable.Pagination />
</SaaSDataDisplayMasterTable>

Dark

<SaaSDataDisplayMasterTable
  tableId="demo-dark"
  data={[
    { id: "1", name: "Alice", email: "[email protected]", status: "active" },
    { id: "2", name: "Bob", email: "[email protected]", status: "inactive" },
    { id: "3", name: "Carol", email: "[email protected]", status: "pending" },
  ]}
  columns={[
    { accessorKey: "name", header: "Name" },
    { accessorKey: "email", header: "Email" },
    { accessorKey: "status", header: "Status" },
  ]}
  totalCount={3}
  getRowId={(row) => row.id}
  pagination={{ pageIndex: 0, pageSize: 10 }}
  onPaginationChange={() => {}}
  sorting={[]}
  onSortingChange={() => {}}
  columnFilters={[]}
  onColumnFiltersChange={() => {}}
>
  <SaaSDataDisplayMasterTable.Toolbar />
  <table className="w-full caption-bottom text-sm">
    <SaaSDataDisplayMasterTable.Header />
    <SaaSDataDisplayMasterTable.Body />
  </table>
  <SaaSDataDisplayMasterTable.Pagination />
</SaaSDataDisplayMasterTable>

With Row Selection

<SaaSDataDisplayMasterTable
  tableId="demo-selection"
  data={[
    { id: "1", name: "Alice", email: "[email protected]", status: "active" },
    { id: "2", name: "Bob", email: "[email protected]", status: "inactive" },
    { id: "3", name: "Carol", email: "[email protected]", status: "pending" },
  ]}
  columns={[
    { accessorKey: "name", header: "Name" },
    { accessorKey: "email", header: "Email" },
    { accessorKey: "status", header: "Status" },
  ]}
  totalCount={3}
  getRowId={(row) => row.id}
  enableRowSelection={true}
  rowSelection={{}}
  onRowSelectionChange={() => {}}
  pagination={{ pageIndex: 0, pageSize: 10 }}
  onPaginationChange={() => {}}
  sorting={[]}
  onSortingChange={() => {}}
  columnFilters={[]}
  onColumnFiltersChange={() => {}}
>
  <SaaSDataDisplayMasterTable.Toolbar />
  <table className="w-full caption-bottom text-sm">
    <SaaSDataDisplayMasterTable.Header />
    <SaaSDataDisplayMasterTable.Body />
  </table>
  <SaaSDataDisplayMasterTable.Pagination />
</SaaSDataDisplayMasterTable>

Loading

<SaaSDataDisplayMasterTable
  tableId="demo-loading"
  data={[]}
  columns={[
    { accessorKey: "name", header: "Name" },
    { accessorKey: "email", header: "Email" },
    { accessorKey: "status", header: "Status" },
  ]}
  totalCount={0}
  isLoading={true}
  getRowId={(row) => row.id}
  pagination={{ pageIndex: 0, pageSize: 10 }}
  onPaginationChange={() => {}}
  sorting={[]}
  onSortingChange={() => {}}
  columnFilters={[]}
  onColumnFiltersChange={() => {}}
>
  <SaaSDataDisplayMasterTable.Toolbar />
  <table className="w-full caption-bottom text-sm">
    <SaaSDataDisplayMasterTable.Header />
    <SaaSDataDisplayMasterTable.Body />
  </table>
  <SaaSDataDisplayMasterTable.Pagination />
</SaaSDataDisplayMasterTable>

Empty

<SaaSDataDisplayMasterTable
  tableId="demo-empty"
  data={[]}
  columns={[
    { accessorKey: "name", header: "Name" },
    { accessorKey: "email", header: "Email" },
    { accessorKey: "status", header: "Status" },
  ]}
  totalCount={0}
  getRowId={(row) => row.id}
  pagination={{ pageIndex: 0, pageSize: 10 }}
  onPaginationChange={() => {}}
  sorting={[]}
  onSortingChange={() => {}}
  columnFilters={[]}
  onColumnFiltersChange={() => {}}
>
  <SaaSDataDisplayMasterTable.Toolbar />
  <table className="w-full caption-bottom text-sm">
    <SaaSDataDisplayMasterTable.Header />
    <SaaSDataDisplayMasterTable.Body />
  </table>
  <SaaSDataDisplayMasterTable.Pagination />
</SaaSDataDisplayMasterTable>

<SaaSDataDisplayMasterTable
  tableId="demo-minimal"
  data={[
    { id: "1", name: "Alice", email: "[email protected]", status: "active" },
    { id: "2", name: "Bob", email: "[email protected]", status: "inactive" },
  ]}
  columns={[
    { accessorKey: "name", header: "Name" },
    { accessorKey: "email", header: "Email" },
    { accessorKey: "status", header: "Status" },
  ]}
  totalCount={2}
  getRowId={(row) => row.id}
  pagination={{ pageIndex: 0, pageSize: 10 }}
  onPaginationChange={() => {}}
  sorting={[]}
  onSortingChange={() => {}}
  columnFilters={[]}
  onColumnFiltersChange={() => {}}
>
  <table className="w-full caption-bottom text-sm">
    <SaaSDataDisplayMasterTable.Header />
    <SaaSDataDisplayMasterTable.Body />
  </table>
</SaaSDataDisplayMasterTable>

Props

Name	Type	Default	Required
`tableId`	`string`	—	Yes
`columns`	`MasterTableColumnDef<TData>[]`	—	Yes
`getRowId`	`(row: TData) => string`	—	Yes
`data`	`TData[]`	—	Yes
`totalCount`	`number`	—	Yes
`isLoading`	`boolean`	—	No
`pagination`	`PaginationState`	—	Yes
`onPaginationChange`	`OnPaginationChange`	—	Yes
`pageSizeOptions`	`number[]`	—	No
`sorting`	`SortingState`	—	Yes
`onSortingChange`	`(sorting: SortingState) => void`	—	Yes
`columnFilters`	`ColumnFiltersState`	—	No
`onColumnFiltersChange`	`((filters: ColumnFiltersState) => void)`	—	No
`enableRowSelection`	`boolean`	—	No
`rowSelection`	`RowSelectionState`	—	No
`onRowSelectionChange`	`((selection: RowSelectionState) => void)`	—	No
`getRowHref`	`((row: TData) => string)`	—	No
`bulkActions`	`BulkAction<TData>[]`	—	No
`enableColumnVisibility`	`boolean`	—	No
`enableColumnReorder`	`boolean`	—	No
`className`	`string`	—	No