Data Table Bulk Actions

Bulk row selection state, confirmation flow, and action menu for data tables.

Installation

bash

pnpm dlx shadcn@latest add @cs/data-table-bulk-actions

Usage

tsx

import type { DataTableBulkAction } from "@/components/cs/data-table-bulk-actions";

tsx

const action: DataTableBulkAction<{}> = { label: "archive", action: async () => ({ status: 200 }) };

API Reference

DataTableBulkActionDialogProps

Configures an optional confirmation dialog for a data-table bulk action.

tsx

type DataTableBulkActionDialogProps = {
	count: number
	onConfirm: (extraData?: unknown) => void
	onCancel: () => void
	open: boolean
}

DataTableBulkAction

tsx

type DataTableBulkAction = {
	label: string
	icon?: React.ReactNode
	action: (fetchData: DataTableOnData, extraData?: unknown) => Promise<ActionResult>
	dialog?: React.ComponentType<DataTableBulkActionDialogProps>
}

DataTableBulkActionsConfig

tsx

type DataTableBulkActionsConfig = {
	dataKey: keyof TData & string
	dbKey?: string
	actions: TDataTableBulkActions[]
}

DataTableBulkSelectionState

tsx

type DataTableBulkSelectionState = {
	selectedIds: Set<unknown>
	selectAllMode: boolean
	toggleRow: (key: unknown) => void
	selectPage: (keys: unknown[]) => void
	selectAll: () => void
	deselectAll: () => void
	isSelected: (key: unknown) => boolean
	getSelect: () => DataTableOnData["select"]
	count: number
	hasSelection: boolean
}

UseDataTableBulkSelectionReturn

tsx

type UseDataTableBulkSelectionReturn = ReturnType<typeof useDataTableBulkSelection>

useDataTableBulkSelection

Manages selected rows and select-all state for data-table bulk actions.

Props

Name	Type	Default	Description
actions *	TDataTableBulkActions[]	-	-
dataKey *	keyof TData & string	-	-
dbKey	string	-	-

DataTableBulkSelectionHeader

Props

Name	Type	Default	Description
actions *	TDataTableBulkActions[]	-	-
bulk *	DataTableBulkSelectionState	-	-
fetchData *	DataTableOnData	-	-
onPauseStream	(paused: boolean) => void	-	-
onPermission	(action: TDataTableBulkActions) => boolean	-	-
onRefresh *	() => void	-	-
pageKeys *	unknown[]	-	-
totalCount *	number	-	-
translationsRootKey	string	"table"	Namespace containing `bulkActions.*` and `actions.<action.label>` messages. Defaults to `table`.

BulkCellCheckbox

Props

Name	Type	Default	Description
isSelected *	boolean	-	-
onToggle *	(key: unknown) => void	-	-
rowKey *	unknown	-	-
selectAllMode *	boolean	-	-

Dependencies

lucide-react next-intl @cs/action-result @cs/data-table @cs/dialog @cs/toast @shadcn/button @shadcn/checkbox @shadcn/dialog @shadcn/dropdown-menu