Add a way to disable sort and filter features with properties.
This commit is contained in:
parent
d13f56b24a
commit
6b96a85554
6 changed files with 135 additions and 82 deletions
|
@ -90,6 +90,6 @@ export function RemoveDemoTable()
|
||||||
)
|
)
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
}))} />
|
}))} disableFilter={true} disableSort={true} />
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -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",
|
||||||
|
|
|
@ -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,6 +99,8 @@ export function ColumnsHeadings<CK extends ColumnKey>({columns}: {columns: Colum
|
||||||
))
|
))
|
||||||
}
|
}
|
||||||
</tr>
|
</tr>
|
||||||
|
{ // Add filters if filter feature is not disabled.
|
||||||
|
disableFilter !== true && (
|
||||||
<tr className={"filters"}>
|
<tr className={"filters"}>
|
||||||
{ // Add columns filters, if there are some.
|
{ // Add columns filters, if there are some.
|
||||||
(Object.entries(columns) as [CK, Column][]).map(([columnKey, column]) => (
|
(Object.entries(columns) as [CK, Column][]).map(([columnKey, column]) => (
|
||||||
|
@ -107,6 +112,8 @@ export function ColumnsHeadings<CK extends ColumnKey>({columns}: {columns: Colum
|
||||||
))
|
))
|
||||||
}
|
}
|
||||||
</tr>
|
</tr>
|
||||||
|
)
|
||||||
|
}
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -44,6 +44,16 @@ export interface SmartableProperties<CK extends ColumnKey>
|
||||||
*/
|
*/
|
||||||
pageSize: number;
|
pageSize: number;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Disable sort feature.
|
||||||
|
*/
|
||||||
|
disableSort?: boolean;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Disable filter feature.
|
||||||
|
*/
|
||||||
|
disableFilter?: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
|
@ -1,5 +1,12 @@
|
||||||
tr.headings
|
tr.headings
|
||||||
{
|
{
|
||||||
|
&.disable-sort
|
||||||
|
{
|
||||||
|
th { pointer-events: none; }
|
||||||
|
}
|
||||||
|
|
||||||
|
&:not(.disable-sort)
|
||||||
|
{
|
||||||
th
|
th
|
||||||
{
|
{
|
||||||
position: relative;
|
position: relative;
|
||||||
|
@ -78,4 +85,5 @@ tr.headings
|
||||||
float: right;
|
float: right;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
38
yarn.lock
38
yarn.lock
|
@ -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"
|
||||||
|
|
Loading…
Reference in a new issue