Merge pull request #582 from icflorescu/next

Implement rowExpansion.expandable prop, update deps
icflorescu · Apr 26, 2024 · 33ac81b · 33ac81b
2 parents 2162003 + e7fdfd0
commit 33ac81b
Show file tree

Hide file tree

Showing 9 changed files with 452 additions and 373 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -3,6 +3,11 @@
 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.8.2 (2024-04-26)
+
+- Add `rowExpansion.expandable` property defining if row can be expanded (see [#579](https://github.com/icflorescu/mantine-datatable/issues/579), by [@camdarley](https://github.com/camdarley))
+- Update dev dependencies to ensure compatibility with Mantine 7.8.1, Next.js 14.2.3 and React 18.3 
+
 ## 7.8.1 (2024-04-12)
 
 - Update all internal `<Text/>` components to output divs instead of paragraphs to avoid issues such as [#570](https://github.com/icflorescu/mantine-datatable/issues/570)

diff --git a/app/examples/expanding-rows/RowExpansionExampleExpandableRows.module.css b/app/examples/expanding-rows/RowExpansionExampleExpandableRows.module.css
@@ -0,0 +1,8 @@
+.details {
+  font-size: var(--mantine-font-size-sm);
+  background: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-6));
+}
+
+.label {
+  width: rem(130px);
+}
diff --git a/app/examples/expanding-rows/RowExpansionExampleExpandableRows.tsx b/app/examples/expanding-rows/RowExpansionExampleExpandableRows.tsx
@@ -0,0 +1,41 @@
+'use client';
+
+import { Box, Group, Stack } from '@mantine/core';
+import { DataTable } from '__PACKAGE__';
+import { companies } from '~/data';
+import classes from './RowExpansionExampleExpandableRows.module.css';
+
+const records = companies.slice(0, 5);
+
+export function RowExpansionExampleExpandableRows() {
+  // example-start
+  return (
+    <DataTable
+      withTableBorder
+      withColumnBorders
+      columns={[{ accessor: 'name' }, { accessor: 'city' }, { accessor: 'state' }]}
+      records={records}
+      rowExpansion={{
+        allowMultiple: true,
+        expandable: ({ record: { state } }) => state === 'WY', // 👈 enable expansion only on rows where state is WY
+        // example-skip
+        content: ({ record }) => (
+          <Stack className={classes.details} p="xs" gap={6}>
+            <Group gap={6}>
+              <div className={classes.label}>Postal address:</div>
+              <div>
+                {record.streetAddress}, {record.city}, {record.state}
+              </div>
+            </Group>
+            <Group gap={6}>
+              <div className={classes.label}>Mission statement:</div>
+              <Box fs="italic">“{record.missionStatement}”</Box>
+            </Group>
+          </Stack>
+        ),
+        // example-resume
+      }}
+    />
+  );
+  // example-end
+}
diff --git a/app/examples/expanding-rows/page.tsx b/app/examples/expanding-rows/page.tsx
@@ -11,6 +11,7 @@ import { readCodeFile } from '~/lib/code';
 import { allPromiseProps, getRouteMetadata } from '~/lib/utils';
 import { RowExpansionExampleCollapseProps } from './RowExpansionExampleCollapseProps';
 import { RowExpansionExampleControlledMode } from './RowExpansionExampleControlledMode';
+import { RowExpansionExampleExpandableRows } from './RowExpansionExampleExpandableRows';
 import { RowExpansionExampleInitiallyExpandedRows } from './RowExpansionExampleInitiallyExpandedRows';
 import { RowExpansionExampleMultipleExpandedRows } from './RowExpansionExampleMultipleExpandedRows';
 import { RowExpansionExampleSimple } from './RowExpansionExampleSimple';
@@ -26,6 +27,7 @@ export default async function ExpandingRowsExamplePage() {
   const code = await allPromiseProps({
     'RowExpansionExampleCollapseProps.tsx': readCodeFile<string>(`${PATH}/RowExpansionExampleCollapseProps.tsx`),
     'RowExpansionExampleControlledMode.tsx': readCodeFile<string>(`${PATH}/RowExpansionExampleControlledMode.tsx`),
+    'RowExpansionExampleExpandableRows.tsx': readCodeFile<string>(`${PATH}/RowExpansionExampleExpandableRows.tsx`),
     'RowExpansionExampleInitiallyExpandedRows.tsx': readCodeFile<string>(
       `${PATH}/RowExpansionExampleInitiallyExpandedRows.tsx`
     ),
@@ -79,6 +81,11 @@ export default async function ExpandingRowsExamplePage() {
       <RowExpansionExampleMultipleExpandedRows />
       <Txt>Here is the code for the above example:</Txt>
       <CodeBlock code={code['RowExpansionExampleMultipleExpandedRows.tsx']} />
+      <PageSubtitle value="Specifying which rows are expandable" />
+      <Txt>You can specify which rows are expandable like so:</Txt>
+      <RowExpansionExampleExpandableRows />
+      <Txt>Here is the code for the above example:</Txt>
+      <CodeBlock code={code['RowExpansionExampleExpandableRows.tsx']} />
       <PageSubtitle value="Specifying which rows are initially expanded" />
       <Txt>You can specify which rows are initially expanded like so:</Txt>
       <RowExpansionExampleInitiallyExpandedRows />

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mantine-datatable",
-  "version": "7.8.1",
+  "version": "7.8.2",
   "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",
@@ -75,37 +75,37 @@
     "@ducanh2912/next-pwa": "^10.2.6",
     "@faker-js/faker": "^8.4.1",
     "@formkit/auto-animate": "^0.8.2",
-    "@mantine/code-highlight": "^7.8.0",
-    "@mantine/core": "^7.8.0",
-    "@mantine/dates": "^7.8.0",
-    "@mantine/hooks": "^7.8.0",
-    "@mantine/modals": "^7.8.0",
-    "@mantine/notifications": "^7.8.0",
+    "@mantine/code-highlight": "^7.8.1",
+    "@mantine/core": "^7.8.1",
+    "@mantine/dates": "^7.8.1",
+    "@mantine/hooks": "^7.8.1",
+    "@mantine/modals": "^7.8.1",
+    "@mantine/notifications": "^7.8.1",
     "@tabler/icons-react": "^3.2.0",
-    "@tanstack/react-query": "^5.31.0",
+    "@tanstack/react-query": "^5.32.0",
     "@types/lodash": "^4.17.0",
     "@types/node": "^20.12.7",
-    "@types/react": "^18.2.79",
-    "@types/react-dom": "^18.2.25",
-    "@typescript-eslint/eslint-plugin": "^7.7.0",
-    "@typescript-eslint/parser": "^7.7.0",
-    "clsx": "^2.1.0",
-    "cssnano": "^6.1.2",
+    "@types/react": "^18.3.0",
+    "@types/react-dom": "^18.3.0",
+    "@typescript-eslint/eslint-plugin": "^7.7.1",
+    "@typescript-eslint/parser": "^7.7.1",
+    "clsx": "^2.1.1",
+    "cssnano": "^7.0.1",
     "dayjs": "^1.11.10",
     "eslint": "^8",
-    "eslint-config-next": "^14.2.2",
+    "eslint-config-next": "^14.2.3",
     "eslint-config-prettier": "^9.1.0",
     "lodash": "^4.17.21",
-    "mantine-contextmenu": "^7.8.0",
-    "next": "^14.2.2",
+    "mantine-contextmenu": "^7.8.1",
+    "next": "^14.2.3",
     "postcss": "^8.4.38",
     "postcss-cli": "^11.0.0",
     "postcss-import": "^16.1.0",
-    "postcss-preset-mantine": "^1.14.4",
+    "postcss-preset-mantine": "^1.15.0",
     "postcss-simple-vars": "^7.0.1",
     "prettier": "^3.2.5",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "^18.3.0",
+    "react-dom": "^18.3.0",
     "sharp": "^0.33.3",
     "swr": "^2.2.5",
     "tsup": "^8.0.2",

diff --git a/package/DataTableRow.tsx b/package/DataTableRow.tsx
@@ -84,15 +84,15 @@ export function DataTableRow<T>({
       <TableTr
         className={clsx(
           'mantine-datatable-row',
-          { [POINTER_CURSOR]: onClick || onDoubleClick || expansion?.expandOnClick },
+          { [POINTER_CURSOR]: expansion?.isExpandable({ record, index }) && (onClick || onDoubleClick || expansion?.expandOnClick) },
           { [CONTEXT_MENU_CURSOR]: onContextMenu },
           typeof className === 'function' ? className(record, index) : className
         )}
         data-selected={selectionChecked || undefined}
         onClick={(e) => {
           if (expansion) {
-            const { isRowExpanded, expandOnClick, expandRow, collapseRow } = expansion;
-            if (expandOnClick) {
+            const { isExpandable, isRowExpanded, expandOnClick, expandRow, collapseRow } = expansion;
+            if (isExpandable({ record, index }) && expandOnClick) {
               if (isRowExpanded(record)) {
                 collapseRow(record);
               } else {

diff --git a/package/hooks/useRowExpansion.ts b/package/hooks/useRowExpansion.ts
@@ -31,7 +31,7 @@ export function useRowExpansion<T>({
   const expandedRecordIdsState = useState<unknown[]>(initiallyExpandedRecordIds);
 
   if (rowExpansion) {
-    const { trigger, allowMultiple, collapseProps, content } = rowExpansion;
+    const { expandable, trigger, allowMultiple, collapseProps, content } = rowExpansion;
     if (rowExpansion.expanded) {
       ({ recordIds: expandedRecordIds, onRecordIdsChange: setExpandedRecordIds } = rowExpansion.expanded);
     } else {
@@ -45,6 +45,12 @@ export function useRowExpansion<T>({
       expandOnClick: trigger !== 'always' && trigger !== 'never',
       isRowExpanded: (record: T) =>
         trigger === 'always' ? true : expandedRecordIds.includes(getRecordId(record, idAccessor)),
+      isExpandable: ({ record, index }: { record: T; index: number }) => {
+        if (!expandable) {
+          return true;
+        }
+        return expandable({ record, index });
+      },
       expandRow: (record: T) => {
         const recordId = getRecordId(record, idAccessor);
         setExpandedRecordIds?.(allowMultiple ? [...expandedRecordIds, recordId] : [recordId]);

diff --git a/package/types/DataTableRowExpansionProps.ts b/package/types/DataTableRowExpansionProps.ts
@@ -1,6 +1,13 @@
 import type { DataTableRowExpansionCollapseProps } from './DataTableRowExpansionCollapseProps';
 
 export type DataTableRowExpansionProps<T = Record<string, unknown>> = {
+  /**
+   * Function defining which records can be expanded.
+   * Accepts an object with `record` and `index` properties and returns a boolean specifying
+   * whether the row should be expandable.
+   */
+  expandable?: (params: { record: T; index: number }) => boolean;
+
   /**
    * Defines when rows should expand.
    * @default `click`