@payfit/unity-components
Version:
66 lines (65 loc) • 3.15 kB
TypeScript
import { Table as TableType } from '@tanstack/react-table';
import { ActionBarActionItem } from '../../action-bar/ActionBar.js';
export interface DataTableBulkActionsProps<TData> {
/** The table instance from @tanstack/react-table */
table: TableType<TData>;
/** Bulk actions to perform over the table, rendered in the action bar */
actions: ActionBarActionItem[];
/**
* Custom function to render selection count text.
* When provided, pluralization is your responsibility.
*/
renderSelectionText?: (count: number) => string;
}
/**
* The DataTableBulkActions component provides contextual bulk actions when table rows are selected.
* It automatically shows/hides based on row selection and provides keyboard accessibility via F6.
*
* This component wraps the ActionBar and handles the selection UI (selection count + clear button)
* via the `prefixContent` prop, while accepting bulk actions to display.
* @param {DataTableBulkActionsProps} props - The props for the DataTableBulkActions component
* @param props.table - The table instance from `@tanstack/react-table`
* @param props.actions - Bulk actions to perform over the table, rendered in the action bar
* @param props.renderSelectionText - Custom function to render selection count text
* @example
* ```tsx
* import { DataTableRoot, DataTable, DataTableBulkActions } from '@payfit/unity-components'
*
* function Example() {
* const actions = [
* { id: 'delete', label: 'Delete', meta: { onPress: handleDelete } },
* { id: 'archive', label: 'Archive', meta: { onPress: handleArchive } },
* ]
*
* return (
* <DataTableRoot>
* <DataTable table={table}>
* {row => (
* <TableRow key={row.id} isSelected={row.getIsSelected()}>
* {row.getVisibleCells().map(cell => (
* <TableCell key={cell.id}>
* {flexRender(cell.column.columnDef.cell, cell.getContext())}
* </TableCell>
* ))}
* </TableRow>
* )}
* </DataTable>
* <DataTableBulkActions table={table} actions={actions} />
* </DataTableRoot>
* )
* }
* ```
* @remarks
* - Use F6 keyboard shortcut to focus the action bar when it's visible and has actions
* - The keyboard shortcut provides quick access to bulk actions for users with disabilities
* - When triggered, focus moves to the first focusable element in the action bar (typically the first action button)
* - The shortcut only works when rows are selected and the action bar is visible
* - The selection count and clear button are rendered automatically via `prefixContent`
* @see {@link DataTableBulkActionsProps} for all available props
* @see Source code in [Github](https://github.com/PayFit/hr-apps/tree/master/libs/shared/unity/components/src/components/data-table)
*/
declare function DataTableBulkActions<TData extends object>({ table, actions, renderSelectionText, }: DataTableBulkActionsProps<TData>): import("react/jsx-runtime").JSX.Element;
declare namespace DataTableBulkActions {
var displayName: string;
}
export { DataTableBulkActions };