From 3748485bbad85148eebf26f0ada9f45540db37ec Mon Sep 17 00:00:00 2001 From: Ionut-Cristian Florescu Date: Wed, 10 Jan 2024 18:28:39 +0200 Subject: [PATCH] Implement selectionCheckboxProps --- CHANGELOG.md | 4 +++ .../RecordsSelectionExamples.tsx | 5 ++-- app/examples/records-selection/page.tsx | 26 ++++++++++++------- package.json | 2 +- package/DataTable.tsx | 4 ++- package/DataTableRow.tsx | 3 +++ package/DataTableRowSelectorCell.tsx | 8 +++--- package/types/DataTableSelectionProps.ts | 8 +++++- 8 files changed, 42 insertions(+), 18 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index a153d1b9a..951820a69 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,10 @@ The following is a list of notable changes to the Mantine DataTable component. Minor versions that are not listed in the changelog are bug fixes and small improvements. +## 7.4.3 (2024-01-10) + +- Implement the `selectionCheckboxProps` property to allow customizing all selection checkboxes at once + ## 7.4.2 (2024-01-10) - Improve default column toggling behavior diff --git a/app/examples/records-selection/RecordsSelectionExamples.tsx b/app/examples/records-selection/RecordsSelectionExamples.tsx index e2db59f1f..5c2f42265 100644 --- a/app/examples/records-selection/RecordsSelectionExamples.tsx +++ b/app/examples/records-selection/RecordsSelectionExamples.tsx @@ -27,9 +27,7 @@ export function RecordsSelectionExample() { highlightOnHover withTableBorder withColumnBorders - // records={companies} - mih={200} - records={[]} + records={companies} columns={columns} selectedRecords={selectedRecords} onSelectedRecordsChange={setSelectedRecords} @@ -109,6 +107,7 @@ export function CheckboxPropsExample() { selectedRecords={selectedRecords} onSelectedRecordsChange={setSelectedRecords} // example-resume + selectionCheckboxProps={{ size: 'xs' }} allRecordsSelectionCheckboxProps={{ 'aria-label': 'Select all records' }} getRecordSelectionCheckboxProps={(record) => ({ 'aria-label': `Select ${record.name}` })} /> diff --git a/app/examples/records-selection/page.tsx b/app/examples/records-selection/page.tsx index 8aff6cb82..217be0ce7 100644 --- a/app/examples/records-selection/page.tsx +++ b/app/examples/records-selection/page.tsx @@ -102,17 +102,25 @@ export default async function RecordsSelectionExamplePage() { - - You can pass additional props to the selection checkboxes by providing the{' '} - allRecordsSelectionCheckboxProps and getRecordSelectionCheckboxProps properties. The - former is an object of props that will be applied to the column header checkbox, while the latter is a function - that receives the underlying record and record index and returns an object of props. will be applied to the row - selection checkboxes. - + You can pass additional props to the selection checkboxes by providing the following properties: + +
  • + checkboxProps → an object of props that will be applied to all selection checkboxes (both the + column header checkbox and the row selection checkboxes); +
    • +
  • + allRecordsSelectionCheckboxProps → an object of props that will be applied to the column header + checkbox; +
    • +
  • + getRecordSelectionCheckboxProps → a function that receives the underlying record and record index + and returns an object of props that will be applied to the row selection checkboxes. +
    • +     - Inspect the DOM to see the aria-label attributes on the selection checkboxes in the following - example: + In this example, the checkboxes will be rendered with a smaller size and will have custom{' '} + aria-label attributes that will be read by screen readers (inspect the DOM to check these): diff --git a/package.json b/package.json index 894ee2d3a..d450a0c99 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "mantine-datatable", - "version": "7.4.2", + "version": "7.4.3", "description": "The lightweight, dependency-free, dark-theme aware table component for your Mantine UI data-rich applications, featuring asynchronous data loading support, pagination, intuitive Gmail-style additive batch rows selection, column sorting, custom cell data rendering, row expansion, nesting, context menus, and much more", "keywords": [ "mantine", diff --git a/package/DataTable.tsx b/package/DataTable.tsx index a06e877be..b7791f336 100644 --- a/package/DataTable.tsx +++ b/package/DataTable.tsx @@ -47,6 +47,7 @@ export function DataTable({ selectionColumnClassName, selectionColumnStyle, isRecordSelectable, + selectionCheckboxProps, allRecordsSelectionCheckboxProps = { 'aria-label': 'Select all records' }, getRecordSelectionCheckboxProps = (_, index) => ({ 'aria-label': `Select record ${index + 1}` }), sortStatus, @@ -341,7 +342,7 @@ export function DataTable({ selectionChecked={allSelectableRecordsSelected} selectionIndeterminate={someRecordsSelected && !allSelectableRecordsSelected} onSelectionChange={handleHeaderSelectionChange} - selectionCheckboxProps={allRecordsSelectionCheckboxProps} + selectionCheckboxProps={{ ...selectionCheckboxProps, ...allRecordsSelectionCheckboxProps }} selectorCellShadowVisible={selectorCellShadowVisible} selectionColumnClassName={selectionColumnClassName} selectionColumnStyle={selectionColumnStyle} @@ -398,6 +399,7 @@ export function DataTable({ selectionChecked={isSelected} onSelectionChange={handleSelectionChange} isRecordSelectable={isRecordSelectable} + selectionCheckboxProps={selectionCheckboxProps} getSelectionCheckboxProps={getRecordSelectionCheckboxProps} onClick={onRowClick} onDoubleClick={onRowDoubleClick} diff --git a/package/DataTableRow.tsx b/package/DataTableRow.tsx index 368327ff6..1037744d7 100644 --- a/package/DataTableRow.tsx +++ b/package/DataTableRow.tsx @@ -27,6 +27,7 @@ type DataTableRowProps = { selectionChecked: boolean; onSelectionChange: React.MouseEventHandler | undefined; isRecordSelectable: ((record: T, index: number) => boolean) | undefined; + selectionCheckboxProps: CheckboxProps | undefined; getSelectionCheckboxProps: (record: T, index: number) => CheckboxProps; onClick: DataTableRowClickHandler | undefined; onDoubleClick: DataTableRowClickHandler | undefined; @@ -60,6 +61,7 @@ export function DataTableRow({ selectionChecked, onSelectionChange, isRecordSelectable, + selectionCheckboxProps, getSelectionCheckboxProps, onClick, onDoubleClick, @@ -125,6 +127,7 @@ export function DataTableRow({ checked={selectionChecked} disabled={!onSelectionChange || (isRecordSelectable ? !isRecordSelectable(record, index) : false)} onChange={onSelectionChange} + checkboxProps={selectionCheckboxProps} getCheckboxProps={getSelectionCheckboxProps} /> )} diff --git a/package/DataTableRowSelectorCell.tsx b/package/DataTableRowSelectorCell.tsx index 41c4ec94d..7b9bd5e66 100644 --- a/package/DataTableRowSelectorCell.tsx +++ b/package/DataTableRowSelectorCell.tsx @@ -13,6 +13,7 @@ type DataTableRowSelectorCellProps = { checked: boolean; disabled: boolean; onChange: React.MouseEventHandler | undefined; + checkboxProps: CheckboxProps | undefined; getCheckboxProps: (record: T, index: number) => CheckboxProps; }; @@ -24,11 +25,12 @@ export function DataTableRowSelectorCell({ trigger, onChange, withRightShadow, + checkboxProps, getCheckboxProps, ...otherProps }: DataTableRowSelectorCellProps) { - const checkboxProps = getCheckboxProps(record, index); - const enabled = !otherProps.disabled && !checkboxProps.disabled; + const allCheckboxProps = { ...checkboxProps, ...getCheckboxProps(record, index) }; + const enabled = !otherProps.disabled && !allCheckboxProps.disabled; const handleClick: React.MouseEventHandler = (e) => { e.stopPropagation(); @@ -52,7 +54,7 @@ export function DataTableRowSelectorCell({ classNames={enabled ? { input: POINTER_CURSOR } : undefined} onChange={onChange as unknown as React.ChangeEventHandler} {...otherProps} - {...checkboxProps} + {...allCheckboxProps} /> ); diff --git a/package/types/DataTableSelectionProps.ts b/package/types/DataTableSelectionProps.ts index e1ac68572..2955ce8bd 100644 --- a/package/types/DataTableSelectionProps.ts +++ b/package/types/DataTableSelectionProps.ts @@ -7,6 +7,7 @@ export type DataTableSelectionProps> = selectedRecords?: never; onSelectedRecordsChange?: never; isRecordSelectable?: never; + selectionCheckboxProps?: never; getRecordSelectionCheckboxProps?: never; allRecordsSelectionCheckboxProps?: never; selectionColumnClassName?: never; @@ -48,7 +49,12 @@ export type DataTableSelectionProps> = isRecordSelectable?: (record: T, index: number) => boolean; /** - * A function used to determine additional props of the row selection checkbox. + * Props for the selection checkboxes, applied to header and all rows. + */ + selectionCheckboxProps?: CheckboxProps; + + /** + * A function used to determine additional props of the row selection checkboxes. * Accepts the current record and its index as arguments and returns an object. */ getRecordSelectionCheckboxProps?: (record: T, index: number) => CheckboxProps;