Merge pull request #511 from icflorescu/next

Implement selectionCheckboxProps

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

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}` })}
     />

app/examples/records-selection/page.tsx

@@ -102,17 +102,25 @@ export default async function RecordsSelectionExamplePage() {
       <CodeBlock code={code['CustomColumnStyleExample.tsx']} />
       <CustomColumnStyleExample />
       <PageSubtitle value="Additional selection checkbox props" />
-      <Txt>
-        You can pass additional props to the selection checkboxes by providing the{' '}
-        <Code>allRecordsSelectionCheckboxProps</Code> and <Code>getRecordSelectionCheckboxProps</Code> 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.
-      </Txt>
+      <Txt>You can pass additional props to the selection checkboxes by providing the following properties:</Txt>
+      <UnorderedList compact>
+        <li>
+          <Code>checkboxProps</Code> → an object of props that will be applied to all selection checkboxes (both the
+          column header checkbox and the row selection checkboxes);
+        </li>
+        <li>
+          <Code>allRecordsSelectionCheckboxProps</Code> → an object of props that will be applied to the column header
+          checkbox;
+        </li>
+        <li>
+          <Code>getRecordSelectionCheckboxProps</Code> → 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.
+        </li>
+      </UnorderedList>
       <CodeBlock tabs={{ code, keys: ['CheckboxPropsExample.tsx', 'columns.ts'] }} />
       <Txt>
-        Inspect the DOM to see the <Code>aria-label</Code> 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{' '}
+        <Code>aria-label</Code> attributes that will be read by screen readers (inspect the DOM to check these):
       </Txt>
       <CheckboxPropsExample />
       <PageSubtitle value="Selecting all records on all pages" />

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",

package/DataTable.tsx

@@ -47,6 +47,7 @@ export function DataTable<T>({
   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<T>({
                   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<T>({
                       selectionChecked={isSelected}
                       onSelectionChange={handleSelectionChange}
                       isRecordSelectable={isRecordSelectable}
+                      selectionCheckboxProps={selectionCheckboxProps}
                       getSelectionCheckboxProps={getRecordSelectionCheckboxProps}
                       onClick={onRowClick}
                       onDoubleClick={onRowDoubleClick}

package/DataTableRow.tsx

@@ -27,6 +27,7 @@ type DataTableRowProps<T> = {
   selectionChecked: boolean;
   onSelectionChange: React.MouseEventHandler | undefined;
   isRecordSelectable: ((record: T, index: number) => boolean) | undefined;
+  selectionCheckboxProps: CheckboxProps | undefined;
   getSelectionCheckboxProps: (record: T, index: number) => CheckboxProps;
   onClick: DataTableRowClickHandler<T> | undefined;
   onDoubleClick: DataTableRowClickHandler<T> | undefined;
@@ -60,6 +61,7 @@ export function DataTableRow<T>({
   selectionChecked,
   onSelectionChange,
   isRecordSelectable,
+  selectionCheckboxProps,
   getSelectionCheckboxProps,
   onClick,
   onDoubleClick,
@@ -125,6 +127,7 @@ export function DataTableRow<T>({
             checked={selectionChecked}
             disabled={!onSelectionChange || (isRecordSelectable ? !isRecordSelectable(record, index) : false)}
             onChange={onSelectionChange}
+            checkboxProps={selectionCheckboxProps}
             getCheckboxProps={getSelectionCheckboxProps}
           />
         )}

package/DataTableRowSelectorCell.tsx

@@ -13,6 +13,7 @@ type DataTableRowSelectorCellProps<T> = {
   checked: boolean;
   disabled: boolean;
   onChange: React.MouseEventHandler | undefined;
+  checkboxProps: CheckboxProps | undefined;
   getCheckboxProps: (record: T, index: number) => CheckboxProps;
 };
 
@@ -24,11 +25,12 @@ export function DataTableRowSelectorCell<T>({
   trigger,
   onChange,
   withRightShadow,
+  checkboxProps,
   getCheckboxProps,
   ...otherProps
 }: DataTableRowSelectorCellProps<T>) {
-  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<T>({
         classNames={enabled ? { input: POINTER_CURSOR } : undefined}
         onChange={onChange as unknown as React.ChangeEventHandler}
         {...otherProps}
-        {...checkboxProps}
+        {...allCheckboxProps}
       />
     </TableTd>
   );

package/types/DataTableSelectionProps.ts

@@ -7,6 +7,7 @@ export type DataTableSelectionProps<T = Record<string, unknown>> =
       selectedRecords?: never;
       onSelectedRecordsChange?: never;
       isRecordSelectable?: never;
+      selectionCheckboxProps?: never;
       getRecordSelectionCheckboxProps?: never;
       allRecordsSelectionCheckboxProps?: never;
       selectionColumnClassName?: never;
@@ -48,7 +49,12 @@ export type DataTableSelectionProps<T = Record<string, unknown>> =
       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;