From 6c8a29160fead593442f1ceeabf396a82ae42cd0 Mon Sep 17 00:00:00 2001 From: Ionut-Cristian Florescu Date: Wed, 8 Nov 2023 13:22:36 +0200 Subject: [PATCH 1/3] Update README --- README.md | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index d96f13047..90aa27052 100644 --- a/README.md +++ b/README.md @@ -131,7 +131,9 @@ Make sure to browse the comprehensive list of [usage examples](https://icfloresc ## Other useful resources -Mantine DataTable works perfectly with [Mantine Context Menu](https://icflorescu.github.io/mantine-contextmenu/). +Mantine DataTable works perfectly with [Mantine Context Menu](https://icflorescu.github.io/mantine-contextmenu/), a library built by the same author that enables you to enhance your UIs with desktop-grade, lightweight yet fully-featured context menus that respect the Mantine color scheme out of the box: + +[![Mantine ContextMenu](https://user-images.githubusercontent.com/581999/279488420-96467a1b-2fb7-4876-bbc0-6976d26ed79b.png)](https://icflorescu.github.io/mantine-contextmenu/) ## Contributing @@ -143,11 +145,11 @@ Here's the list of people who have already contributed to Mantine DataTable: Want to [become a code contributor](https://icflorescu.github.io/mantine-datatable/contribute-and-support)? -## Sponsor the project +## Support the project If you find this package useful, please consider ❤️ [sponsoring my work](https://github.com/sponsors/icflorescu). Your sponsorship will help me dedicate more time to maintaining the project and will encourage me to add new features and fix existing bugs. -If you're a company using Mantine DataTable in a commercial project, you can also [hire my services](https://github.com/icflorescu). +If you're a company using Mantine, Mantine DataTable or [Mantine ContextMenu](https://icflorescu.github.io/mantine-contextmenu/) in a commercial project, you can also [hire my services](https://github.com/icflorescu). ## Other means of support From c19588ed5a1581117e89048b90a015594fd09852 Mon Sep 17 00:00:00 2001 From: Ionut-Cristian Florescu Date: Fri, 10 Nov 2023 13:13:01 +0200 Subject: [PATCH 2/3] Update dev deps --- package.json | 6 +-- yarn.lock | 150 +++++++++++++++++++++++++-------------------------- 2 files changed, 78 insertions(+), 78 deletions(-) diff --git a/package.json b/package.json index 66affa9e4..cd67fcbb3 100644 --- a/package.json +++ b/package.json @@ -93,11 +93,11 @@ "cssnano": "^6.0.1", "dayjs": "^1.11.10", "eslint": "^8.53.0", - "eslint-config-next": "^14.0.1", + "eslint-config-next": "^14.0.2", "eslint-config-prettier": "^9.0.0", "lodash": "^4.17.21", - "mantine-contextmenu": "^7.1.10", - "next": "14.0.1", + "mantine-contextmenu": "^7.1.11", + "next": "14.0.2", "postcss": "^8.4.31", "postcss-cli": "^10.1.0", "postcss-import": "^15.1.0", diff --git a/yarn.lock b/yarn.lock index 461680172..d413d3fd2 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1412,62 +1412,62 @@ resolved "https://registry.yarnpkg.com/@mantine/store/-/store-7.2.1.tgz#9210b56e6186ed9115d62c8df77c9d05aa4b9bb2" integrity sha512-BoWI+gmwZUEIdjXhpIfTNhKa+yiPGUbCubb5QbATQVWztLU/cyyv3HpGHKS8EUe0HS26MIAcTBK+5pHZduTOIA== -"@next/env@14.0.1": - version "14.0.1" - resolved "https://registry.yarnpkg.com/@next/env/-/env-14.0.1.tgz#7d03c9042c205a320aef2ea3f83c2d16b6825563" - integrity sha512-Ms8ZswqY65/YfcjrlcIwMPD7Rg/dVjdLapMcSHG26W6O67EJDF435ShW4H4LXi1xKO1oRc97tLXUpx8jpLe86A== +"@next/env@14.0.2": + version "14.0.2" + resolved "https://registry.yarnpkg.com/@next/env/-/env-14.0.2.tgz#c1fb535983bca768e7eccd7b9cf4636127fc6d25" + integrity sha512-HAW1sljizEaduEOes/m84oUqeIDAUYBR1CDwu2tobNlNDFP3cSm9d6QsOsGeNlIppU1p/p1+bWbYCbvwjFiceA== -"@next/eslint-plugin-next@14.0.1": - version "14.0.1" - resolved "https://registry.yarnpkg.com/@next/eslint-plugin-next/-/eslint-plugin-next-14.0.1.tgz#6e587b76588a02d77267945b5d1f059a6c8fd9ca" - integrity sha512-bLjJMwXdzvhnQOnxvHoTTUh/+PYk6FF/DCgHi4BXwXCINer+o1ZYfL9aVeezj/oI7wqGJOqwGIXrlBvPbAId3w== +"@next/eslint-plugin-next@14.0.2": + version "14.0.2" + resolved "https://registry.yarnpkg.com/@next/eslint-plugin-next/-/eslint-plugin-next-14.0.2.tgz#421799f46116d8032f1739ce5ce89822453c8f03" + integrity sha512-APrYFsXfAhnysycqxHcpg6Y4i7Ukp30GzVSZQRKT3OczbzkqGjt33vNhScmgoOXYBU1CfkwgtXmNxdiwv1jKmg== dependencies: glob "7.1.7" -"@next/swc-darwin-arm64@14.0.1": - version "14.0.1" - resolved "https://registry.yarnpkg.com/@next/swc-darwin-arm64/-/swc-darwin-arm64-14.0.1.tgz#75a5f872c4077ecd536d7496bc24f3d312d5dcd0" - integrity sha512-JyxnGCS4qT67hdOKQ0CkgFTp+PXub5W1wsGvIq98TNbF3YEIN7iDekYhYsZzc8Ov0pWEsghQt+tANdidITCLaw== - -"@next/swc-darwin-x64@14.0.1": - version "14.0.1" - resolved "https://registry.yarnpkg.com/@next/swc-darwin-x64/-/swc-darwin-x64-14.0.1.tgz#7d8498fc680cc8b4d5181bee336818c63779bc5e" - integrity sha512-625Z7bb5AyIzswF9hvfZWa+HTwFZw+Jn3lOBNZB87lUS0iuCYDHqk3ujuHCkiyPtSC0xFBtYDLcrZ11mF/ap3w== - -"@next/swc-linux-arm64-gnu@14.0.1": - version "14.0.1" - resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.0.1.tgz#184286794e67bed192de7dbb10d7f040c996f965" - integrity sha512-iVpn3KG3DprFXzVHM09kvb//4CNNXBQ9NB/pTm8LO+vnnnaObnzFdS5KM+w1okwa32xH0g8EvZIhoB3fI3mS1g== - -"@next/swc-linux-arm64-musl@14.0.1": - version "14.0.1" - resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.0.1.tgz#e8121b860ebc97a8d2a9113e5a42878430e749d5" - integrity sha512-mVsGyMxTLWZXyD5sen6kGOTYVOO67lZjLApIj/JsTEEohDDt1im2nkspzfV5MvhfS7diDw6Rp/xvAQaWZTv1Ww== - -"@next/swc-linux-x64-gnu@14.0.1": - version "14.0.1" - resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.0.1.tgz#cdc4276b11a10c892fd1cb7dd31e024064db9c3b" - integrity sha512-wMqf90uDWN001NqCM/auRl3+qVVeKfjJdT9XW+RMIOf+rhUzadmYJu++tp2y+hUbb6GTRhT+VjQzcgg/QTD9NQ== - -"@next/swc-linux-x64-musl@14.0.1": - version "14.0.1" - resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.0.1.tgz#4a194a484ceb34fd370e8d1af571493859fb2542" - integrity sha512-ol1X1e24w4j4QwdeNjfX0f+Nza25n+ymY0T2frTyalVczUmzkVD7QGgPTZMHfR1aLrO69hBs0G3QBYaj22J5GQ== - -"@next/swc-win32-arm64-msvc@14.0.1": - version "14.0.1" - resolved "https://registry.yarnpkg.com/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.0.1.tgz#71923debee50f98ef166b28cdb3ad7e7463e6598" - integrity sha512-WEmTEeWs6yRUEnUlahTgvZteh5RJc4sEjCQIodJlZZ5/VJwVP8p2L7l6VhzQhT4h7KvLx/Ed4UViBdne6zpIsw== - -"@next/swc-win32-ia32-msvc@14.0.1": - version "14.0.1" - resolved "https://registry.yarnpkg.com/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.0.1.tgz#b8f46da899c279fd65db76f0951849290c480ef9" - integrity sha512-oFpHphN4ygAgZUKjzga7SoH2VGbEJXZa/KL8bHCAwCjDWle6R1SpiGOdUdA8EJ9YsG1TYWpzY6FTbUA+iAJeww== - -"@next/swc-win32-x64-msvc@14.0.1": - version "14.0.1" - resolved "https://registry.yarnpkg.com/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.0.1.tgz#be3dd8b3729ec51c99ff04b51e2b235756d02b6e" - integrity sha512-FFp3nOJ/5qSpeWT0BZQ+YE1pSMk4IMpkME/1DwKBwhg4mJLB9L+6EXuJi4JEwaJdl5iN+UUlmUD3IsR1kx5fAg== +"@next/swc-darwin-arm64@14.0.2": + version "14.0.2" + resolved "https://registry.yarnpkg.com/@next/swc-darwin-arm64/-/swc-darwin-arm64-14.0.2.tgz#eba35a1425fee5d305903c85ae0d6d2b0d512c7b" + integrity sha512-i+jQY0fOb8L5gvGvojWyZMfQoQtDVB2kYe7fufOEiST6sicvzI2W5/EXo4lX5bLUjapHKe+nFxuVv7BA+Pd7LQ== + +"@next/swc-darwin-x64@14.0.2": + version "14.0.2" + resolved "https://registry.yarnpkg.com/@next/swc-darwin-x64/-/swc-darwin-x64-14.0.2.tgz#8adb4dfc3d596c0816da67df9b75603218cf2a42" + integrity sha512-zRCAO0d2hW6gBEa4wJaLn+gY8qtIqD3gYd9NjruuN98OCI6YyelmhWVVLlREjS7RYrm9OUQIp/iVJFeB6kP1hg== + +"@next/swc-linux-arm64-gnu@14.0.2": + version "14.0.2" + resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.0.2.tgz#1f88d066d44c9229a861815e3d449b0037dae14e" + integrity sha512-tSJmiaon8YaKsVhi7GgRizZoV0N1Sx5+i+hFTrCKKQN7s3tuqW0Rov+RYdPhAv/pJl4qiG+XfSX4eJXqpNg3dA== + +"@next/swc-linux-arm64-musl@14.0.2": + version "14.0.2" + resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.0.2.tgz#de9b2708abc35dd19429a662a11785d0c54d1ec7" + integrity sha512-dXJLMSEOwqJKcag1BeX1C+ekdPPJ9yXbWIt3nAadhbLx5CjACoB2NQj9Xcqu2tmdr5L6m34fR+fjGPs+ZVPLzA== + +"@next/swc-linux-x64-gnu@14.0.2": + version "14.0.2" + resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.0.2.tgz#64bd555dcbc7fd6c38cb86028baf7d7fc80bd4ac" + integrity sha512-WC9KAPSowj6as76P3vf1J3mf2QTm3Wv3FBzQi7UJ+dxWjK3MhHVWsWUo24AnmHx9qDcEtHM58okgZkXVqeLB+Q== + +"@next/swc-linux-x64-musl@14.0.2": + version "14.0.2" + resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.0.2.tgz#69e6abf0f516df69acbf663eeb8ed6fd8eebcc38" + integrity sha512-KSSAwvUcjtdZY4zJFa2f5VNJIwuEVnOSlqYqbQIawREJA+gUI6egeiRu290pXioQXnQHYYdXmnVNZ4M+VMB7KQ== + +"@next/swc-win32-arm64-msvc@14.0.2": + version "14.0.2" + resolved "https://registry.yarnpkg.com/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.0.2.tgz#82bc49af0986f4b2c113b5f223a559fc51b49b9d" + integrity sha512-2/O0F1SqJ0bD3zqNuYge0ok7OEWCQwk55RPheDYD0va5ij7kYwrFkq5ycCRN0TLjLfxSF6xI5NM6nC5ux7svEQ== + +"@next/swc-win32-ia32-msvc@14.0.2": + version "14.0.2" + resolved "https://registry.yarnpkg.com/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.0.2.tgz#2f1958ad82b7f7ec5da8ad8ac2f18ef7a8e7757f" + integrity sha512-vJI/x70Id0oN4Bq/R6byBqV1/NS5Dl31zC+lowO8SDu1fHmUxoAdILZR5X/sKbiJpuvKcCrwbYgJU8FF/Gh50Q== + +"@next/swc-win32-x64-msvc@14.0.2": + version "14.0.2" + resolved "https://registry.yarnpkg.com/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.0.2.tgz#629174f587beb640a431a4a3fe4e26d5d4f8de52" + integrity sha512-Ut4LXIUvC5m8pHTe2j0vq/YDnTEyq6RSR9vHYPqnELrDapPhLNz9Od/L5Ow3J8RNDWpEnfCiQXuVdfjlNEJ7ug== "@nodelib/fs.scandir@2.1.5": version "2.1.5" @@ -3051,12 +3051,12 @@ escape-string-regexp@^4.0.0: resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz#14ba83a5d373e3d311e5afca29cf5bfad965bf34" integrity sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA== -eslint-config-next@^14.0.1: - version "14.0.1" - resolved "https://registry.yarnpkg.com/eslint-config-next/-/eslint-config-next-14.0.1.tgz#4e59cbaa1c1c72f6d7c4d9110b0902630493ef56" - integrity sha512-QfIFK2WD39H4WOespjgf6PLv9Bpsd7KGGelCtmq4l67nGvnlsGpuvj0hIT+aIy6p5gKH+lAChYILsyDlxP52yg== +eslint-config-next@^14.0.2: + version "14.0.2" + resolved "https://registry.yarnpkg.com/eslint-config-next/-/eslint-config-next-14.0.2.tgz#bbcd7af62ed9700d9dd74c1b8538fdb9495d46ce" + integrity sha512-CasWThlsyIcg/a+clU6KVOMTieuDhTztsrqvniP6AsRki9v7FnojTa7vKQOYM8QSOsQdZ/aElLD1Y2Oc8/PsIg== dependencies: - "@next/eslint-plugin-next" "14.0.1" + "@next/eslint-plugin-next" "14.0.2" "@rushstack/eslint-patch" "^1.3.3" "@typescript-eslint/parser" "^5.4.2 || ^6.0.0" eslint-import-resolver-node "^0.3.6" @@ -4231,10 +4231,10 @@ magic-string@^0.25.0, magic-string@^0.25.7: dependencies: sourcemap-codec "^1.4.8" -mantine-contextmenu@^7.1.10: - version "7.1.10" - resolved "https://registry.yarnpkg.com/mantine-contextmenu/-/mantine-contextmenu-7.1.10.tgz#500b9d4c230db87e984bf1d94fc50c4afa1aac6f" - integrity sha512-bnjUkHv0bmFnGINsKpTjoLhdFKqof9GsRsv9rSGQfuRai9oa1x9sO7V++VIrEk6NhMM12TeX1ers+eebPdSUEQ== +mantine-contextmenu@^7.1.11: + version "7.1.11" + resolved "https://registry.yarnpkg.com/mantine-contextmenu/-/mantine-contextmenu-7.1.11.tgz#82a1868affa2f40bab53048c69b45bb870d9e922" + integrity sha512-cbhzxpfQ/EjQ1d+5/h5zgnsocXQEgLLx0/5W0AS0U7V8izxEjCpD5vF87LA/HHwOqo2DyuuT0kPzgLqAckJ7CA== mdn-data@2.0.28: version "2.0.28" @@ -4349,12 +4349,12 @@ neo-async@^2.6.2: resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.6.2.tgz#b4aafb93e3aeb2d8174ca53cf163ab7d7308305f" integrity sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw== -next@14.0.1: - version "14.0.1" - resolved "https://registry.yarnpkg.com/next/-/next-14.0.1.tgz#1375d94c5dc7af730234af48401be270e975cb22" - integrity sha512-s4YaLpE4b0gmb3ggtmpmV+wt+lPRuGtANzojMQ2+gmBpgX9w5fTbjsy6dXByBuENsdCX5pukZH/GxdFgO62+pA== +next@14.0.2: + version "14.0.2" + resolved "https://registry.yarnpkg.com/next/-/next-14.0.2.tgz#02ba6a1656edf14d3913c7a3553026e9d6e083c7" + integrity sha512-jsAU2CkYS40GaQYOiLl9m93RTv2DA/tTJ0NRlmZIBIL87YwQ/xR8k796z7IqgM3jydI8G25dXvyYMC9VDIevIg== dependencies: - "@next/env" "14.0.1" + "@next/env" "14.0.2" "@swc/helpers" "0.5.2" busboy "1.6.0" caniuse-lite "^1.0.30001406" @@ -4362,15 +4362,15 @@ next@14.0.1: styled-jsx "5.1.1" watchpack "2.4.0" optionalDependencies: - "@next/swc-darwin-arm64" "14.0.1" - "@next/swc-darwin-x64" "14.0.1" - "@next/swc-linux-arm64-gnu" "14.0.1" - "@next/swc-linux-arm64-musl" "14.0.1" - "@next/swc-linux-x64-gnu" "14.0.1" - "@next/swc-linux-x64-musl" "14.0.1" - "@next/swc-win32-arm64-msvc" "14.0.1" - "@next/swc-win32-ia32-msvc" "14.0.1" - "@next/swc-win32-x64-msvc" "14.0.1" + "@next/swc-darwin-arm64" "14.0.2" + "@next/swc-darwin-x64" "14.0.2" + "@next/swc-linux-arm64-gnu" "14.0.2" + "@next/swc-linux-arm64-musl" "14.0.2" + "@next/swc-linux-x64-gnu" "14.0.2" + "@next/swc-linux-x64-musl" "14.0.2" + "@next/swc-win32-arm64-msvc" "14.0.2" + "@next/swc-win32-ia32-msvc" "14.0.2" + "@next/swc-win32-x64-msvc" "14.0.2" node-abi@^3.3.0: version "3.51.0" From 5dcb905dc16926fbf3abcfef012d50e0e449fca7 Mon Sep 17 00:00:00 2001 From: Ionut-Cristian Florescu Date: Fri, 10 Nov 2023 16:21:42 +0200 Subject: [PATCH 3/3] Implement selectionTrigger property --- CHANGELOG.md | 4 ++ .../RecordsSelectionExamples.tsx | 57 ++++++++++++++++++- app/examples/records-selection/page.tsx | 12 ++++ package.json | 6 +- package/DataTable.tsx | 7 ++- package/DataTableHeader.tsx | 5 +- package/DataTableHeaderSelectorCell.tsx | 11 +++- package/DataTableRow.tsx | 6 +- package/DataTableRowSelectorCell.tsx | 28 +++++++-- package/types/DataTableSelectionProps.ts | 8 +++ package/types/DataTableSelectionTrigger.ts | 1 + package/types/index.ts | 1 + yarn.lock | 16 +++--- 13 files changed, 140 insertions(+), 22 deletions(-) create mode 100644 package/types/DataTableSelectionTrigger.ts diff --git a/CHANGELOG.md b/CHANGELOG.md index b3a918d4f..ff381bf45 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.1.6 (2023-11-10) + +- Add `selectionTrigger` property to allow maximizing the selection area to the entire cell holding the checkbox + ## 7.1.5 (2023-11-08) - Fix backgrounds for selection cell and last column when using `pinLastColumn` feature (see issues [#464](https://github.com/icflorescu/mantine-datatable/issues/464) and [#465](https://github.com/icflorescu/mantine-datatable/issues/465)) diff --git a/app/examples/records-selection/RecordsSelectionExamples.tsx b/app/examples/records-selection/RecordsSelectionExamples.tsx index 9e838c99a..28b07209d 100644 --- a/app/examples/records-selection/RecordsSelectionExamples.tsx +++ b/app/examples/records-selection/RecordsSelectionExamples.tsx @@ -1,6 +1,6 @@ 'use client'; -import { Button, Center, Paper, Text } from '@mantine/core'; +import { Box, Button, Center, Paper, Stack, Text } from '@mantine/core'; import { showNotification } from '@mantine/notifications'; import { IconTrash } from '@tabler/icons-react'; import { DataTable, differenceBy, uniqBy, type DataTableColumn } from '__PACKAGE__'; @@ -209,3 +209,58 @@ export function RecordsSelectionHorizontalScrollingBehaviorExample() { ); // example-end } + +export function CellTriggerRecordsSelectionExample() { + const records = companies.slice(0, 3); + const [selectedRecords, setSelectedRecords] = useState([]); + + return ( + <> + {/* example-start CellTriggerRecordsSelectionExample.tsx */} + ( + + {streetAddress} + {city} + {state} + + ), + }, + { accessor: 'missionStatement' }, + ]} + selectedRecords={selectedRecords} + onSelectedRecordsChange={setSelectedRecords} + // example-resume + selectionTrigger="cell" // 👈 click anywhere in the cell to select the record + /> + {/* example-end */} + +
+ +
+ + + ); +} diff --git a/app/examples/records-selection/page.tsx b/app/examples/records-selection/page.tsx index 5bb760a73..7afa970b1 100644 --- a/app/examples/records-selection/page.tsx +++ b/app/examples/records-selection/page.tsx @@ -11,6 +11,7 @@ import { UnorderedList } from '~/components/UnorderedList'; import { readCodeFile } from '~/lib/code'; import { getRouteMetadata } from '~/lib/utils'; import { + CellTriggerRecordsSelectionExample, CheckboxPropsExample, DisabledRecordsExample, RecordsSelectionExample, @@ -27,6 +28,7 @@ export default async function RecordsSelectionExamplePage() { Record< | 'columns.ts' | 'RecordsSelectionExample.tsx' + | 'CellTriggerRecordsSelectionExample.tsx' | 'DisabledRecordsExample.tsx' | 'CheckboxPropsExample.tsx' | 'SelectAllRecordsOnAllPagesExample.tsx' @@ -126,6 +128,16 @@ export default async function RecordsSelectionExamplePage() { Code: + + + By default, selection is triggered when the user clicks the row selection checkbox. +
+ However, you can maximize the trigger area to the entire cell holding the checkbox by setting the{' '} + selectionTrigger property value to cell: + + + In this case, clicking anywhere in the cell will result in selecting/deselecting the underlying record: + Head over to the next example to discover more features. diff --git a/package.json b/package.json index cd67fcbb3..cf7647ba0 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "mantine-datatable", - "version": "7.1.5", + "version": "7.1.6", "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", @@ -96,12 +96,12 @@ "eslint-config-next": "^14.0.2", "eslint-config-prettier": "^9.0.0", "lodash": "^4.17.21", - "mantine-contextmenu": "^7.1.11", + "mantine-contextmenu": "^7.1.12", "next": "14.0.2", "postcss": "^8.4.31", "postcss-cli": "^10.1.0", "postcss-import": "^15.1.0", - "postcss-preset-mantine": "^1.9.1", + "postcss-preset-mantine": "^1.10.0", "postcss-simple-vars": "^7.0.1", "prettier": "^3.0.3", "react": "^18.2.0", diff --git a/package/DataTable.tsx b/package/DataTable.tsx index 561dc93d8..fb1ac11f7 100644 --- a/package/DataTable.tsx +++ b/package/DataTable.tsx @@ -32,6 +32,7 @@ export function DataTable({ defaultColumnRender, idAccessor = 'id', records, + selectionTrigger = 'checkbox', selectedRecords, onSelectedRecordsChange, isRecordSelectable, @@ -305,6 +306,7 @@ export function DataTable({ sortStatus={sortStatus} sortIcons={sortIcons} onSortStatusChange={onSortStatusChange} + selectionTrigger={selectionTrigger} selectionVisible={selectionColumnVisible} selectionChecked={allSelectableRecordsSelected} selectionIndeterminate={someRecordsSelected && !allSelectableRecordsSelected} @@ -319,10 +321,10 @@ export function DataTable({ const recordId = getRecordId(record, idAccessor); const isSelected = selectedRecordIds?.includes(recordId) || false; - let handleSelectionChange: React.ChangeEventHandler | undefined; + let handleSelectionChange: React.MouseEventHandler | undefined; if (onSelectedRecordsChange && selectedRecords) { handleSelectionChange = (e) => { - if ((e.nativeEvent as PointerEvent).shiftKey && lastSelectionChangeIndex !== null) { + if (e.nativeEvent.shiftKey && lastSelectionChangeIndex !== null) { const targetRecords = records.filter( index > lastSelectionChangeIndex ? (rec, idx) => @@ -358,6 +360,7 @@ export function DataTable({ columns={effectiveColumns} defaultColumnProps={defaultColumnProps} defaultColumnRender={defaultColumnRender} + selectionTrigger={selectionTrigger} selectionVisible={selectionColumnVisible} selectionChecked={isSelected} onSelectionChange={handleSelectionChange} diff --git a/package/DataTableHeader.tsx b/package/DataTableHeader.tsx index 2dee355a0..0eaa9bd2c 100644 --- a/package/DataTableHeader.tsx +++ b/package/DataTableHeader.tsx @@ -4,7 +4,7 @@ import { forwardRef } from 'react'; import { DataTableColumnGroupHeaderCell } from './DataTableColumnGroupHeaderCell'; import { DataTableHeaderCell } from './DataTableHeaderCell'; import { DataTableHeaderSelectorCell } from './DataTableHeaderSelectorCell'; -import type { DataTableColumn, DataTableColumnGroup, DataTableSortProps } from './types'; +import type { DataTableColumn, DataTableColumnGroup, DataTableSelectionTrigger, DataTableSortProps } from './types'; type DataTableHeaderProps = { className: string | undefined; @@ -15,6 +15,7 @@ type DataTableHeaderProps = { columns: DataTableColumn[]; defaultColumnProps: Omit, 'accessor'> | undefined; groups: readonly DataTableColumnGroup[] | undefined; + selectionTrigger: DataTableSelectionTrigger; selectionVisible: boolean; selectionChecked: boolean; selectionIndeterminate: boolean; @@ -33,6 +34,7 @@ export const DataTableHeader = forwardRef(function DataTableHeader( columns, defaultColumnProps, groups, + selectionTrigger, selectionVisible, selectionChecked, selectionIndeterminate, @@ -44,6 +46,7 @@ export const DataTableHeader = forwardRef(function DataTableHeader( ) { const allRecordsSelectorCell = selectionVisible ? ( = { defaultColumnRender: | ((record: T, index: number, accessor: keyof T | (string & NonNullable)) => React.ReactNode) | undefined; + selectionTrigger: DataTableSelectionTrigger; selectionVisible: boolean; selectionChecked: boolean; - onSelectionChange: React.ChangeEventHandler | undefined; + onSelectionChange: React.MouseEventHandler | undefined; isRecordSelectable: ((record: T, index: number) => boolean) | undefined; getSelectionCheckboxProps: (record: T, index: number) => CheckboxProps; onClick: DataTableRowClickHandler | undefined; @@ -49,6 +51,7 @@ export function DataTableRow({ columns, defaultColumnProps, defaultColumnRender, + selectionTrigger, selectionVisible, selectionChecked, onSelectionChange, @@ -105,6 +108,7 @@ export function DataTableRow({ record={record} index={index} + trigger={selectionTrigger} withRightShadow={selectorCellShadowVisible} checked={selectionChecked} disabled={!onSelectionChange || (isRecordSelectable ? !isRecordSelectable(record, index) : false)} diff --git a/package/DataTableRowSelectorCell.tsx b/package/DataTableRowSelectorCell.tsx index 157456812..a46298e09 100644 --- a/package/DataTableRowSelectorCell.tsx +++ b/package/DataTableRowSelectorCell.tsx @@ -1,30 +1,50 @@ import { Checkbox, TableTd, type CheckboxProps } from '@mantine/core'; +import clsx from 'clsx'; +import type { DataTableSelectionTrigger } from './types'; import { POINTER_CURSOR } from './utilityClasses'; type DataTableRowSelectorCellProps = { record: T; index: number; + trigger: DataTableSelectionTrigger; withRightShadow: boolean; checked: boolean; disabled: boolean; - onChange: React.ChangeEventHandler | undefined; + onChange: React.MouseEventHandler | undefined; getCheckboxProps: (record: T, index: number) => CheckboxProps; }; export function DataTableRowSelectorCell({ record, index, + trigger, + onChange, withRightShadow, getCheckboxProps, ...otherProps }: DataTableRowSelectorCellProps) { + const checkboxProps = getCheckboxProps(record, index); + const enabled = !otherProps.disabled && !checkboxProps.disabled; + + const handleClick: React.MouseEventHandler = (e) => { + e.stopPropagation(); + if (trigger === 'cell' && enabled) { + onChange?.(e); + } + }; + return ( e.stopPropagation()} + onClick={handleClick} > - + ); } diff --git a/package/types/DataTableSelectionProps.ts b/package/types/DataTableSelectionProps.ts index a302244d1..98a671b01 100644 --- a/package/types/DataTableSelectionProps.ts +++ b/package/types/DataTableSelectionProps.ts @@ -1,7 +1,9 @@ import type { CheckboxProps } from '@mantine/core'; +import type { DataTableSelectionTrigger } from './DataTableSelectionTrigger'; export type DataTableSelectionProps> = | { + selectionTrigger?: never; selectedRecords?: never; onSelectedRecordsChange?: never; isRecordSelectable?: never; @@ -9,6 +11,12 @@ export type DataTableSelectionProps> = allRecordsSelectionCheckboxProps?: never; } | { + /** + * Defines how selection is triggered. + * @default 'checkbox' + */ + selectionTrigger?: DataTableSelectionTrigger; + /** * Currently-selected records. */ diff --git a/package/types/DataTableSelectionTrigger.ts b/package/types/DataTableSelectionTrigger.ts new file mode 100644 index 000000000..f07417f41 --- /dev/null +++ b/package/types/DataTableSelectionTrigger.ts @@ -0,0 +1 @@ +export type DataTableSelectionTrigger = 'cell' | 'checkbox'; diff --git a/package/types/index.ts b/package/types/index.ts index 3ff07c31f..0b590639a 100644 --- a/package/types/index.ts +++ b/package/types/index.ts @@ -11,6 +11,7 @@ export * from './DataTableRowClickHandler'; export * from './DataTableRowExpansionCollapseProps'; export * from './DataTableRowExpansionProps'; export * from './DataTableSelectionProps'; +export * from './DataTableSelectionTrigger'; export * from './DataTableSortProps'; export * from './DataTableSortStatus'; export * from './DataTableVerticalAlign'; diff --git a/yarn.lock b/yarn.lock index d413d3fd2..6da55741d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4231,10 +4231,10 @@ magic-string@^0.25.0, magic-string@^0.25.7: dependencies: sourcemap-codec "^1.4.8" -mantine-contextmenu@^7.1.11: - version "7.1.11" - resolved "https://registry.yarnpkg.com/mantine-contextmenu/-/mantine-contextmenu-7.1.11.tgz#82a1868affa2f40bab53048c69b45bb870d9e922" - integrity sha512-cbhzxpfQ/EjQ1d+5/h5zgnsocXQEgLLx0/5W0AS0U7V8izxEjCpD5vF87LA/HHwOqo2DyuuT0kPzgLqAckJ7CA== +mantine-contextmenu@^7.1.12: + version "7.1.12" + resolved "https://registry.yarnpkg.com/mantine-contextmenu/-/mantine-contextmenu-7.1.12.tgz#da7f17372bd8c92b949ce53a1a73c5ee047f5a4c" + integrity sha512-6Q0ozFGVqCTP0Jum5tBkTvLqrinznerscUrNHh8R8XHSvgJPDmjMKC/FaFZTD/U/XsFBdgJmLdL4cR2ga0aRag== mdn-data@2.0.28: version "2.0.28" @@ -4822,10 +4822,10 @@ postcss-ordered-values@^6.0.0: cssnano-utils "^4.0.0" postcss-value-parser "^4.2.0" -postcss-preset-mantine@^1.9.1: - version "1.9.1" - resolved "https://registry.yarnpkg.com/postcss-preset-mantine/-/postcss-preset-mantine-1.9.1.tgz#24a4ad3e8132b7f31238c4a018bf8536854a9f41" - integrity sha512-7wyKKsxXvHaAxX9//9FS9tSEWaG96KIXl3/cRlaNf3C/V08JI0gvDV6UifloxPpseZQrPMsuC95/+gPBaTJuWw== +postcss-preset-mantine@^1.10.0: + version "1.10.0" + resolved "https://registry.yarnpkg.com/postcss-preset-mantine/-/postcss-preset-mantine-1.10.0.tgz#fddeb3c700db343ddfb9611996f0a4f5c884b8d4" + integrity sha512-pXe8iExVBzleZTp2VBPwdyJC+l00/cmhbuda6In5O22LL9/KPi57NF8sYgHCsd2u6Tv8AVHoz1rmd8W0GrmESg== dependencies: postcss-mixins "^9.0.4" postcss-nested "^6.0.1"