UIKernel/Smartable
1
0
Fork 0
Code Issues 1 Pull requests Projects Releases Packages 1 Wiki Activity

Add a way to disable sort and filter features with properties.
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
Details
ci/woodpecker/tag/woodpecker Pipeline was successful
Details

Browse source
This commit is contained in:
Madeorsk 2024-09-25 18:51:11 +02:00
parent d13f56b24a
commit 6b96a85554
Signed by: Madeorsk
GPG key ID: 677E51CA765BB79F
6 changed files with 135 additions and 82 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
demo/RemoveDemoTable.tsx
View file

@ -90,6 +90,6 @@ export function RemoveDemoTable()
) )
}, },
}, },
}))} /> }))} disableFilter={true} disableSort={true} />
); );
} }

4
package.json
View file

@ -1,5 +1,5 @@
{ {
"version": "1.0.6", "version": "1.1.0",
"name": "@kernelui/smartable", "name": "@kernelui/smartable",
"description": "Kernel UI Smartable.", "description": "Kernel UI Smartable.",
"scripts": { "scripts": {
@ -17,7 +17,7 @@
"@kernelui:registry": "https://code.zeptotech.net/api/packages/UIKernel/npm/" "@kernelui:registry": "https://code.zeptotech.net/api/packages/UIKernel/npm/"
}, },
"devDependencies": { "devDependencies": {
"@kernelui/core": "^1.5.0", "@kernelui/core": "^1.6.0",
"@phosphor-icons/react": "^2.1.7", "@phosphor-icons/react": "^2.1.7",
"@types/node": "^22.0.0", "@types/node": "^22.0.0",
"@types/react": "^18.3.3", "@types/react": "^18.3.3",

33
src/Smartable/Instance.tsx
View file

@ -5,7 +5,7 @@ import {RowInstance, RowLoader} from "./Row";
import {useAsyncManager} from "./AsyncManager"; import {useAsyncManager} from "./AsyncManager";
import {ColumnHeading} from "./Columns/ColumnHeading"; import {ColumnHeading} from "./Columns/ColumnHeading";
import {sortRows} from "./Sort"; import {sortRows} from "./Sort";
import {AutoPaginate} from "@kernelui/core"; import {AutoPaginate, classes} from "@kernelui/core";
/** /**
* Smartable instance component properties. * Smartable instance component properties.
@ -85,9 +85,12 @@ export function Table<CK extends ColumnKey>({columns, children}: React.PropsWith
*/ */
export function ColumnsHeadings<CK extends ColumnKey>({columns}: {columns: Columns<CK>}) export function ColumnsHeadings<CK extends ColumnKey>({columns}: {columns: Columns<CK>})
{ {
// Get feature disable options.
const {disableSort, disableFilter} = useTable<CK>();
return ( return (
<> <>
<tr className={"headings"}> <tr className={classes("headings", disableSort === true ? "disable-sort" : undefined)}>
{ // Showing title of each column. { // Showing title of each column.
Object.keys(columns).map((key) => ( Object.keys(columns).map((key) => (
<AutoColumnContextProvider key={key} columnKey={key}> <AutoColumnContextProvider key={key} columnKey={key}>
@ -96,17 +99,21 @@ export function ColumnsHeadings<CK extends ColumnKey>({columns}: {columns: Colum
)) ))
} }
</tr> </tr>
<tr className={"filters"}> { // Add filters if filter feature is not disabled.
{ // Add columns filters, if there are some. disableFilter !== true && (
(Object.entries(columns) as [CK, Column][]).map(([columnKey, column]) => ( <tr className={"filters"}>
column.filter && ( { // Add columns filters, if there are some.
<AutoColumnContextProvider key={columnKey as string} columnKey={columnKey}> (Object.entries(columns) as [CK, Column][]).map(([columnKey, column]) => (
<td>{column.filter.element}</td> column.filter && (
</AutoColumnContextProvider> <AutoColumnContextProvider key={columnKey as string} columnKey={columnKey}>
) <td>{column.filter.element}</td>
)) </AutoColumnContextProvider>
} )
</tr> ))
}
</tr>
)
}
</> </>
); );
} }

10
src/Smartable/Smartable.tsx
View file

@ -44,6 +44,16 @@ export interface SmartableProperties<CK extends ColumnKey>
*/ */
pageSize: number; pageSize: number;
}; };
/**
* Disable sort feature.
*/
disableSort?: boolean;
/**
* Disable filter feature.
*/
disableFilter?: boolean;
} }
/** /**

130
src/styles/_headings.less
View file

@ -1,81 +1,89 @@
tr.headings tr.headings
{ {
th &.disable-sort
{ {
position: relative; th { pointer-events: none; }
}
cursor: pointer; &:not(.disable-sort)
{
&::before, &::after th
{ // 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
{ {
right: calc(0.33em - 1px); position: relative;
width: 2px; cursor: pointer;
height: 0;
border-radius: 2px;
}
&::after
{
right: calc(0.33em - 3px);
width: 6px; &::before, &::after
height: 6px; { // Sorting order indicator.
border-radius: 6px; transition: height 0.2s ease, background 0.2s ease, top 0.2s ease, bottom 0.2s ease;
}
&.asc, &.desc content: "";
{ position: absolute;
&::after, &::before top: 0;
{ bottom: 0;
background: var(--primary);
display: block;
margin: auto;
box-sizing: border-box;
background: var(--background-darkest);
} }
&::before &::before
{ {
height: 0.8em; right: calc(0.33em - 1px);
width: 2px;
height: 0;
border-radius: 2px;
} }
} &::after
{
right: calc(0.33em - 3px);
&.asc::after width: 6px;
{ height: 6px;
top: 0.5em; border-radius: 6px;
} }
&.desc::after
{
bottom: 0.5em;
}
.order &.asc, &.desc
{ // Sort order indicator. {
position: relative; &::after, &::before
top: 0; {
bottom: 0; background: var(--primary);
}
display: block; &::before
margin: auto 0; {
padding: 0.3em 0.3em 0; height: 0.8em;
align-items: center; }
justify-content: center; }
color: var(--foreground-lightest);
font-size: 0.7em;
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;
}
} }
} }
} }

38
yarn.lock
View file

@ -197,6 +197,15 @@ __metadata:
languageName: node languageName: node
linkType: hard 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": "@babel/template@npm:^7.25.0":
version: 7.25.0 version: 7.25.0
resolution: "@babel/template@npm:7.25.0" resolution: "@babel/template@npm:7.25.0"
@ -524,14 +533,15 @@ __metadata:
languageName: node languageName: node
linkType: hard linkType: hard
"@kernelui/core@npm:^1.5.0": "@kernelui/core@npm:^1.6.0":
version: 1.5.0 version: 1.6.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" 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: dependencies:
"@floating-ui/react": "npm:^0.26.17" "@floating-ui/react": "npm:^0.26.17"
"@fontsource-variable/jetbrains-mono": "npm:^5.0.21" "@fontsource-variable/jetbrains-mono": "npm:^5.0.21"
"@fontsource-variable/manrope": "npm:^5.0.20" "@fontsource-variable/manrope": "npm:^5.0.20"
"@fontsource-variable/source-serif-4": "npm:^5.0.19" "@fontsource-variable/source-serif-4": "npm:^5.0.19"
react-error-boundary: "npm:^4.0.13"
react-merge-refs: "npm:^2.1.1" react-merge-refs: "npm:^2.1.1"
uuid: "npm:^10.0.0" uuid: "npm:^10.0.0"
peerDependencies: peerDependencies:
@ -539,7 +549,7 @@ __metadata:
react: ^18.3.1 react: ^18.3.1
react-dom: ^18.3.1 react-dom: ^18.3.1
react-router-dom: ^6.24.1 react-router-dom: ^6.24.1
checksum: 10c0/ee9aa82a04ead71bb774cb971507e69c3c74f665fb3a7dd0d778ff5eb2feddf1a3d4396f8781c795e3f2554af14f09fffa11b5e44095d785c6f45c7d23034549 checksum: 10c0/2058d66788ade5476e0f63a15f1d4e8164a7c77e1a227d9f8ba15a4fefed13161496dbbdd02b55748b145e27bf81b21eda89e10f1f3217abb4565ecf2110fcb2
languageName: node languageName: node
linkType: hard linkType: hard
@ -547,7 +557,7 @@ __metadata:
version: 0.0.0-use.local version: 0.0.0-use.local
resolution: "@kernelui/smartable@workspace:." resolution: "@kernelui/smartable@workspace:."
dependencies: dependencies:
"@kernelui/core": "npm:^1.5.0" "@kernelui/core": "npm:^1.6.0"
"@phosphor-icons/react": "npm:^2.1.7" "@phosphor-icons/react": "npm:^2.1.7"
"@types/node": "npm:^22.0.0" "@types/node": "npm:^22.0.0"
"@types/react": "npm:^18.3.3" "@types/react": "npm:^18.3.3"
@ -2307,6 +2317,17 @@ __metadata:
languageName: node languageName: node
linkType: hard 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": "react-merge-refs@npm:^2.1.1":
version: 2.1.1 version: 2.1.1
resolution: "react-merge-refs@npm:2.1.1" resolution: "react-merge-refs@npm:2.1.1"
@ -2354,6 +2375,13 @@ __metadata:
languageName: node languageName: node
linkType: hard 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": "resolve@npm:~1.19.0":
version: 1.19.0 version: 1.19.0
resolution: "resolve@npm:1.19.0" resolution: "resolve@npm:1.19.0"