From 6b96a85554e98288170df5c5eab08fef25f94de9 Mon Sep 17 00:00:00 2001 From: Madeorsk Date: Wed, 25 Sep 2024 18:51:11 +0200 Subject: [PATCH] Add a way to disable sort and filter features with properties. --- demo/RemoveDemoTable.tsx | 2 +- package.json | 4 +- src/Smartable/Instance.tsx | 33 +++++---- src/Smartable/Smartable.tsx | 10 +++ src/styles/_headings.less | 130 +++++++++++++++++++----------------- yarn.lock | 38 +++++++++-- 6 files changed, 135 insertions(+), 82 deletions(-) diff --git a/demo/RemoveDemoTable.tsx b/demo/RemoveDemoTable.tsx index 22c60a6..714ca3f 100644 --- a/demo/RemoveDemoTable.tsx +++ b/demo/RemoveDemoTable.tsx @@ -90,6 +90,6 @@ export function RemoveDemoTable() ) }, }, - }))} /> + }))} disableFilter={true} disableSort={true} /> ); } diff --git a/package.json b/package.json index 99030d8..dd7d57b 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { - "version": "1.0.6", + "version": "1.1.0", "name": "@kernelui/smartable", "description": "Kernel UI Smartable.", "scripts": { @@ -17,7 +17,7 @@ "@kernelui:registry": "https://code.zeptotech.net/api/packages/UIKernel/npm/" }, "devDependencies": { - "@kernelui/core": "^1.5.0", + "@kernelui/core": "^1.6.0", "@phosphor-icons/react": "^2.1.7", "@types/node": "^22.0.0", "@types/react": "^18.3.3", diff --git a/src/Smartable/Instance.tsx b/src/Smartable/Instance.tsx index 467d380..bc5e9d1 100644 --- a/src/Smartable/Instance.tsx +++ b/src/Smartable/Instance.tsx @@ -5,7 +5,7 @@ import {RowInstance, RowLoader} from "./Row"; import {useAsyncManager} from "./AsyncManager"; import {ColumnHeading} from "./Columns/ColumnHeading"; import {sortRows} from "./Sort"; -import {AutoPaginate} from "@kernelui/core"; +import {AutoPaginate, classes} from "@kernelui/core"; /** * Smartable instance component properties. @@ -85,9 +85,12 @@ export function Table({columns, children}: React.PropsWith */ export function ColumnsHeadings({columns}: {columns: Columns}) { + // Get feature disable options. + const {disableSort, disableFilter} = useTable(); + return ( <> - + { // Showing title of each column. Object.keys(columns).map((key) => ( @@ -96,17 +99,21 @@ export function ColumnsHeadings({columns}: {columns: Colum )) } - - { // Add columns filters, if there are some. - (Object.entries(columns) as [CK, Column][]).map(([columnKey, column]) => ( - column.filter && ( - - {column.filter.element} - - ) - )) - } - + { // Add filters if filter feature is not disabled. + disableFilter !== true && ( + + { // Add columns filters, if there are some. + (Object.entries(columns) as [CK, Column][]).map(([columnKey, column]) => ( + column.filter && ( + + {column.filter.element} + + ) + )) + } + + ) + } ); } diff --git a/src/Smartable/Smartable.tsx b/src/Smartable/Smartable.tsx index ab9ea40..63879dd 100644 --- a/src/Smartable/Smartable.tsx +++ b/src/Smartable/Smartable.tsx @@ -44,6 +44,16 @@ export interface SmartableProperties */ pageSize: number; }; + + /** + * Disable sort feature. + */ + disableSort?: boolean; + + /** + * Disable filter feature. + */ + disableFilter?: boolean; } /** diff --git a/src/styles/_headings.less b/src/styles/_headings.less index 4e2fa38..daa114a 100644 --- a/src/styles/_headings.less +++ b/src/styles/_headings.less @@ -1,81 +1,89 @@ tr.headings { - th + &.disable-sort { - position: relative; + th { pointer-events: none; } + } - cursor: pointer; - - &::before, &::after - { // Sorting order indicator. - transition: height 0.2s ease, background 0.2s ease, top 0.2s ease, bottom 0.2s ease; - - content: ""; - position: absolute; - top: 0; - bottom: 0; - - display: block; - margin: auto; - box-sizing: border-box; - - background: var(--background-darkest); - } - - &::before + &:not(.disable-sort) + { + th { - right: calc(0.33em - 1px); + position: relative; - width: 2px; - height: 0; - border-radius: 2px; - } - &::after - { - right: calc(0.33em - 3px); + cursor: pointer; - width: 6px; - height: 6px; - border-radius: 6px; - } + &::before, &::after + { // Sorting order indicator. + transition: height 0.2s ease, background 0.2s ease, top 0.2s ease, bottom 0.2s ease; - &.asc, &.desc - { - &::after, &::before - { - background: var(--primary); + content: ""; + position: absolute; + top: 0; + bottom: 0; + + display: block; + margin: auto; + box-sizing: border-box; + + background: var(--background-darkest); } &::before { - height: 0.8em; + right: calc(0.33em - 1px); + + width: 2px; + height: 0; + border-radius: 2px; } - } + &::after + { + right: calc(0.33em - 3px); - &.asc::after - { - top: 0.5em; - } - &.desc::after - { - bottom: 0.5em; - } + width: 6px; + height: 6px; + border-radius: 6px; + } - .order - { // Sort order indicator. - position: relative; - top: 0; - bottom: 0; + &.asc, &.desc + { + &::after, &::before + { + background: var(--primary); + } - display: block; - margin: auto 0; - padding: 0.3em 0.3em 0; - align-items: center; - justify-content: center; - color: var(--foreground-lightest); - font-size: 0.7em; + &::before + { + height: 0.8em; + } + } - float: right; + &.asc::after + { + top: 0.5em; + } + &.desc::after + { + bottom: 0.5em; + } + + .order + { // Sort order indicator. + position: relative; + top: 0; + bottom: 0; + + display: block; + margin: auto 0; + padding: 0.3em 0.3em 0; + align-items: center; + justify-content: center; + color: var(--foreground-lightest); + font-size: 0.7em; + + float: right; + } } } } diff --git a/yarn.lock b/yarn.lock index 885df1a..3e67ba8 100644 --- a/yarn.lock +++ b/yarn.lock @@ -197,6 +197,15 @@ __metadata: languageName: node linkType: hard +"@babel/runtime@npm:^7.12.5": + version: 7.25.6 + resolution: "@babel/runtime@npm:7.25.6" + dependencies: + regenerator-runtime: "npm:^0.14.0" + checksum: 10c0/d6143adf5aa1ce79ed374e33fdfd74fa975055a80bc6e479672ab1eadc4e4bfd7484444e17dd063a1d180e051f3ec62b357c7a2b817e7657687b47313158c3d2 + languageName: node + linkType: hard + "@babel/template@npm:^7.25.0": version: 7.25.0 resolution: "@babel/template@npm:7.25.0" @@ -524,14 +533,15 @@ __metadata: languageName: node linkType: hard -"@kernelui/core@npm:^1.5.0": - version: 1.5.0 - resolution: "@kernelui/core@npm:1.5.0::__archiveUrl=https%3A%2F%2Fcode.zeptotech.net%2Fapi%2Fpackages%2FUIKernel%2Fnpm%2F%2540kernelui%252Fcore%2F-%2F1.5.0%2Fcore-1.5.0.tgz" +"@kernelui/core@npm:^1.6.0": + version: 1.6.0 + resolution: "@kernelui/core@npm:1.6.0::__archiveUrl=https%3A%2F%2Fcode.zeptotech.net%2Fapi%2Fpackages%2FUIKernel%2Fnpm%2F%2540kernelui%252Fcore%2F-%2F1.6.0%2Fcore-1.6.0.tgz" dependencies: "@floating-ui/react": "npm:^0.26.17" "@fontsource-variable/jetbrains-mono": "npm:^5.0.21" "@fontsource-variable/manrope": "npm:^5.0.20" "@fontsource-variable/source-serif-4": "npm:^5.0.19" + react-error-boundary: "npm:^4.0.13" react-merge-refs: "npm:^2.1.1" uuid: "npm:^10.0.0" peerDependencies: @@ -539,7 +549,7 @@ __metadata: react: ^18.3.1 react-dom: ^18.3.1 react-router-dom: ^6.24.1 - checksum: 10c0/ee9aa82a04ead71bb774cb971507e69c3c74f665fb3a7dd0d778ff5eb2feddf1a3d4396f8781c795e3f2554af14f09fffa11b5e44095d785c6f45c7d23034549 + checksum: 10c0/2058d66788ade5476e0f63a15f1d4e8164a7c77e1a227d9f8ba15a4fefed13161496dbbdd02b55748b145e27bf81b21eda89e10f1f3217abb4565ecf2110fcb2 languageName: node linkType: hard @@ -547,7 +557,7 @@ __metadata: version: 0.0.0-use.local resolution: "@kernelui/smartable@workspace:." dependencies: - "@kernelui/core": "npm:^1.5.0" + "@kernelui/core": "npm:^1.6.0" "@phosphor-icons/react": "npm:^2.1.7" "@types/node": "npm:^22.0.0" "@types/react": "npm:^18.3.3" @@ -2307,6 +2317,17 @@ __metadata: languageName: node linkType: hard +"react-error-boundary@npm:^4.0.13": + version: 4.0.13 + resolution: "react-error-boundary@npm:4.0.13" + dependencies: + "@babel/runtime": "npm:^7.12.5" + peerDependencies: + react: ">=16.13.1" + checksum: 10c0/6f3e0e4d7669f680ccf49c08c9571519c6e31f04dcfc30a765a7136c7e6fbbbe93423dd5a9fce12107f8166e54133e9dd5c2079a00c7a38201ac811f7a28b8e7 + languageName: node + linkType: hard + "react-merge-refs@npm:^2.1.1": version: 2.1.1 resolution: "react-merge-refs@npm:2.1.1" @@ -2354,6 +2375,13 @@ __metadata: languageName: node linkType: hard +"regenerator-runtime@npm:^0.14.0": + version: 0.14.1 + resolution: "regenerator-runtime@npm:0.14.1" + checksum: 10c0/1b16eb2c4bceb1665c89de70dcb64126a22bc8eb958feef3cd68fe11ac6d2a4899b5cd1b80b0774c7c03591dc57d16631a7f69d2daa2ec98100e2f29f7ec4cc4 + languageName: node + linkType: hard + "resolve@npm:~1.19.0": version: 1.19.0 resolution: "resolve@npm:1.19.0"