From e4bd4218c5ae62971782ec0d9956794a10434d99 Mon Sep 17 00:00:00 2001 From: serhatkaya Date: Thu, 30 May 2024 15:09:26 +0300 Subject: [PATCH 1/2] Enhancement: Add support for sorting by nested property in columns --- package/DataTableHeader.tsx | 2 ++ package/DataTableHeaderCell.tsx | 13 ++++++++++++- package/types/DataTableColumn.ts | 1 + package/types/DataTableSortStatus.ts | 5 +++++ 4 files changed, 20 insertions(+), 1 deletion(-) diff --git a/package/DataTableHeader.tsx b/package/DataTableHeader.tsx index b5eb14aca..ea1109495 100644 --- a/package/DataTableHeader.tsx +++ b/package/DataTableHeader.tsx @@ -128,6 +128,7 @@ export const DataTableHeader = forwardRef(function DataTableHeader( titleStyle, filter, filtering, + sortKey, } = { ...defaultColumnProps, ...columnProps }; return ( @@ -148,6 +149,7 @@ export const DataTableHeader = forwardRef(function DataTableHeader( resizable={resizable && index < columns.length - 1} sortStatus={sortStatus} sortIcons={sortIcons} + sortKey={sortKey} onSortStatusChange={onSortStatusChange} filter={filter} filtering={filtering} diff --git a/package/DataTableHeaderCell.tsx b/package/DataTableHeaderCell.tsx index e923c2a35..596c40f86 100644 --- a/package/DataTableHeaderCell.tsx +++ b/package/DataTableHeaderCell.tsx @@ -23,7 +23,16 @@ type DataTableHeaderCellProps = { onSortStatusChange: DataTableSortProps['onSortStatusChange']; } & Pick< DataTableColumn, - 'accessor' | 'sortable' | 'draggable' | 'toggleable' | 'resizable' | 'textAlign' | 'width' | 'filter' | 'filtering' + | 'accessor' + | 'sortable' + | 'draggable' + | 'toggleable' + | 'resizable' + | 'textAlign' + | 'width' + | 'filter' + | 'filtering' + | 'sortKey' >; export function DataTableHeaderCell({ @@ -43,6 +52,7 @@ export function DataTableHeaderCell({ onSortStatusChange, filter, filtering, + sortKey, }: DataTableHeaderCellProps) { const { setSourceColumn, setTargetColumn, swapColumns, setColumnsToggle } = useDataTableColumnsContext(); const [dragOver, setDragOver] = useState(false); @@ -58,6 +68,7 @@ export function DataTableHeaderCell({ if (e?.defaultPrevented) return; onSortStatusChange({ + sortKey, columnAccessor: accessor, direction: sortStatus?.columnAccessor === accessor diff --git a/package/types/DataTableColumn.ts b/package/types/DataTableColumn.ts index 4d564181c..5fcd4dbdb 100644 --- a/package/types/DataTableColumn.ts +++ b/package/types/DataTableColumn.ts @@ -33,6 +33,7 @@ export type DataTableColumn> = { * If true, column will be sortable. */ sortable?: boolean; + sortKey?: string; /** * If set to true, the column can be dragged. diff --git a/package/types/DataTableSortStatus.ts b/package/types/DataTableSortStatus.ts index e227750dc..a6c39f9f8 100644 --- a/package/types/DataTableSortStatus.ts +++ b/package/types/DataTableSortStatus.ts @@ -1,4 +1,9 @@ export type DataTableSortStatus> = { + /** + * Sort column key for nested values. + * @type {string} + */ + sortKey?: string; /** * Sort column accessor. * You can use dot-notation for nested objects property drilling From 795d38afa01ede971120d3c9f10ad8d0a7a9a5cb Mon Sep 17 00:00:00 2001 From: Ionut-Cristian Florescu Date: Mon, 3 Jun 2024 22:24:52 +0300 Subject: [PATCH 2/2] Update deps, changelog, fix #593, release --- CHANGELOG.md | 6 + package.json | 36 +- package/DataTableRow.tsx | 5 +- yarn.lock | 702 +++++++++++++++++++-------------------- 4 files changed, 375 insertions(+), 374 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index ae859f522..901401937 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,12 @@ 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.10.1 (2024-06-03) + +- Update dev dependencies to ensure compatibility with Mantine 7.10.1 +- Add support for sorting by nested property in columns (see PR [#600](https://github.com/icflorescu/mantine-datatable/pull/600)) +- Fix issue [#593](https://github.com/icflorescu/mantine-datatable/issues/593) (`cursor: pointer` not showing when using `onRowClick`) + ## 7.9.1 (2024-05-10) - Update dev dependencies to ensure compatibility with Mantine 7.9.1 diff --git a/package.json b/package.json index a58c977c9..b4549d36c 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "mantine-datatable", - "version": "7.9.1", + "version": "7.10.1", "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,20 +75,20 @@ "@ducanh2912/next-pwa": "^10.2.7", "@faker-js/faker": "^8.4.1", "@formkit/auto-animate": "^0.8.2", - "@mantine/code-highlight": "^7.9.1", - "@mantine/core": "^7.9.1", - "@mantine/dates": "^7.9.1", - "@mantine/hooks": "^7.9.1", - "@mantine/modals": "^7.9.1", - "@mantine/notifications": "^7.9.1", - "@tabler/icons-react": "^3.3.0", - "@tanstack/react-query": "^5.35.1", - "@types/lodash": "^4.17.1", - "@types/node": "^20.12.11", - "@types/react": "^18.3.1", + "@mantine/code-highlight": "^7.10.1", + "@mantine/core": "^7.10.1", + "@mantine/dates": "^7.10.1", + "@mantine/hooks": "^7.10.1", + "@mantine/modals": "^7.10.1", + "@mantine/notifications": "^7.10.1", + "@tabler/icons-react": "^3.5.0", + "@tanstack/react-query": "^5.40.0", + "@types/lodash": "^4.17.4", + "@types/node": "^20.14.0", + "@types/react": "^18.3.3", "@types/react-dom": "^18.3.0", - "@typescript-eslint/eslint-plugin": "^7.8.0", - "@typescript-eslint/parser": "^7.8.0", + "@typescript-eslint/eslint-plugin": "^7.12.0", + "@typescript-eslint/parser": "^7.12.0", "clsx": "^2.1.1", "cssnano": "^7.0.1", "dayjs": "^1.11.11", @@ -96,19 +96,19 @@ "eslint-config-next": "^14.2.3", "eslint-config-prettier": "^9.1.0", "lodash": "^4.17.21", - "mantine-contextmenu": "^7.9.1", + "mantine-contextmenu": "^7.10.1", "next": "^14.2.3", "postcss": "^8.4.38", "postcss-cli": "^11.0.0", "postcss-import": "^16.1.0", "postcss-preset-mantine": "^1.15.0", "postcss-simple-vars": "^7.0.1", - "prettier": "^3.2.5", + "prettier": "^3.3.0", "react": "^18.3.1", "react-dom": "^18.3.1", - "sharp": "^0.33.3", + "sharp": "^0.33.4", "swr": "^2.2.5", - "tsup": "^8.0.2", + "tsup": "^8.1.0", "typescript": "^5.4.5", "webpack": "^5.91.0" }, diff --git a/package/DataTableRow.tsx b/package/DataTableRow.tsx index 7d361b814..5b4bdf3a6 100644 --- a/package/DataTableRow.tsx +++ b/package/DataTableRow.tsx @@ -84,7 +84,10 @@ export function DataTableRow({