Add a way to disable sort and filter features with properties.
This commit is contained in:
parent
d13f56b24a
commit
6b96a85554
GPG key ID:
677E51CA765BB79F
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",
|
||||
"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",
|
||||
|
|
|
|||
|
|
@ -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<CK extends ColumnKey>({columns, children}: React.PropsWith
|
|||
*/
|
||||
export function ColumnsHeadings<CK extends ColumnKey>({columns}: {columns: Columns<CK>})
|
||||
{
|
||||
// Get feature disable options.
|
||||
const {disableSort, disableFilter} = useTable<CK>();
|
||||
|
||||
return (
|
||||
<>
|
||||
<tr className={"headings"}>
|
||||
<tr className={classes("headings", disableSort === true ? "disable-sort" : undefined)}>
|
||||
{ // Showing title of each column.
|
||||
Object.keys(columns).map((key) => (
|
||||
<AutoColumnContextProvider key={key} columnKey={key}>
|
||||
|
|
@ -96,17 +99,21 @@ export function ColumnsHeadings<CK extends ColumnKey>({columns}: {columns: Colum
|
|||
))
|
||||
}
|
||||
</tr>
|
||||
<tr className={"filters"}>
|
||||
{ // Add columns filters, if there are some.
|
||||
(Object.entries(columns) as [CK, Column][]).map(([columnKey, column]) => (
|
||||
column.filter && (
|
||||
<AutoColumnContextProvider key={columnKey as string} columnKey={columnKey}>
|
||||
<td>{column.filter.element}</td>
|
||||
</AutoColumnContextProvider>
|
||||
)
|
||||
))
|
||||
}
|
||||
</tr>
|
||||
{ // Add filters if filter feature is not disabled.
|
||||
disableFilter !== true && (
|
||||
<tr className={"filters"}>
|
||||
{ // Add columns filters, if there are some.
|
||||
(Object.entries(columns) as [CK, Column][]).map(([columnKey, column]) => (
|
||||
column.filter && (
|
||||
<AutoColumnContextProvider key={columnKey as string} columnKey={columnKey}>
|
||||
<td>{column.filter.element}</td>
|
||||
</AutoColumnContextProvider>
|
||||
)
|
||||
))
|
||||
}
|
||||
</tr>
|
||||
)
|
||||
}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -44,6 +44,16 @@ export interface SmartableProperties<CK extends ColumnKey>
|
|||
*/
|
||||
pageSize: number;
|
||||
};
|
||||
|
||||
/**
|
||||
* Disable sort feature.
|
||||
*/
|
||||
disableSort?: boolean;
|
||||
|
||||
/**
|
||||
* Disable filter feature.
|
||||
*/
|
||||
disableFilter?: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
38
yarn.lock
38
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"
|
||||
|
|
|
|||
Loading…
Reference in a new issue