Compare commits

..

No commits in common. "main" and "v1.0.5" have entirely different histories.
main ... v1.0.5

7 changed files with 733 additions and 868 deletions

View file

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

View file

@ -1,4 +1,4 @@
import "@kernelui/core/lib/index.css"; import "@kernelui/core/lib/style.css";
import "../src/styles/smartable.less"; import "../src/styles/smartable.less";
import React from "react"; import React from "react";

View file

@ -1,5 +1,5 @@
{ {
"version": "1.1.2", "version": "1.0.5",
"name": "@kernelui/smartable", "name": "@kernelui/smartable",
"description": "Kernel UI Smartable.", "description": "Kernel UI Smartable.",
"scripts": { "scripts": {
@ -17,22 +17,22 @@
"@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.8.2", "@kernelui/core": "^1.3.3",
"@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.12", "@types/react": "^18.3.3",
"@types/react-dom": "^18.3.1", "@types/react-dom": "^18.3.0",
"@vitejs/plugin-react": "^4.3.4", "@vitejs/plugin-react": "^4.3.0",
"less": "^4.2.0", "less": "^4.2.0",
"react": "^18.3.1", "react": "^18.3.1",
"react-dom": "^18.3.1", "react-dom": "^18.3.1",
"react-router-dom": "^7.0.1", "react-router-dom": "^6.26.2",
"typescript": "^5.4.5", "typescript": "^5.4.5",
"vite": "^6.0.1", "vite": "^5.2.11",
"vite-plugin-dts": "^4.3.0" "vite-plugin-dts": "^3.9.1"
}, },
"peerDependencies": { "peerDependencies": {
"@kernelui/core": "^1.8.2" "@kernelui/core": "^1.1.2"
}, },
"packageManager": "yarn@4.5.0" "packageManager": "yarn@4.5.0"
} }

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, classes} from "@kernelui/core"; import {AutoPaginate} from "@kernelui/core";
/** /**
* Smartable instance component properties. * Smartable instance component properties.
@ -66,10 +66,10 @@ export function PaginatedInstance<CK extends ColumnKey>(props: InstancePropertie
/** /**
* Base component for a Smartable table. * Base component for a Smartable table.
*/ */
export function Table<CK extends ColumnKey>({className, columns, children}: React.PropsWithChildren<InstanceProperties<CK>>) export function Table<CK extends ColumnKey>({columns, children}: React.PropsWithChildren<InstanceProperties<CK>>)
{ {
return ( return (
<table className={classes("smartable", className)}> <table className={"smartable"}>
<thead> <thead>
<ColumnsHeadings columns={columns} /> <ColumnsHeadings columns={columns} />
</thead> </thead>
@ -85,12 +85,9 @@ export function Table<CK extends ColumnKey>({className, columns, children}: Reac
*/ */
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={classes("headings", disableSort === true ? "disable-sort" : undefined)}> <tr className={"headings"}>
{ // 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}>
@ -99,8 +96,6 @@ 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]) => (
@ -112,8 +107,6 @@ export function ColumnsHeadings<CK extends ColumnKey>({columns}: {columns: Colum
)) ))
} }
</tr> </tr>
)
}
</> </>
); );
} }
@ -161,7 +154,7 @@ export function TableBody<CK extends ColumnKey>({pagination}: {
sortedRows ? ( sortedRows ? (
sortedRows.map((rowData, index) => ( sortedRows.map((rowData, index) => (
// Rendering each row from its definition. // Rendering each row from its definition.
<RowInstance key={index} row={rowData} /> <RowInstance row={rowData} />
)) ))
) : ( ) : (
<RowLoader /> <RowLoader />

View file

@ -15,11 +15,6 @@ export type SmartableData<CK extends ColumnKey> = Promisable<(Promisable<RowDefi
*/ */
export interface SmartableProperties<CK extends ColumnKey> export interface SmartableProperties<CK extends ColumnKey>
{ {
/**
* Table custom class name.
*/
className?: string;
/** /**
* Table data. * Table data.
*/ */
@ -49,16 +44,6 @@ export interface SmartableProperties<CK extends ColumnKey>
*/ */
pageSize: number; pageSize: number;
}; };
/**
* Disable sort feature.
*/
disableSort?: boolean;
/**
* Disable filter feature.
*/
disableFilter?: boolean;
} }
/** /**

View file

@ -1,12 +1,5 @@
tr.headings tr.headings
{ {
&.disable-sort
{
th { pointer-events: none; }
}
&:not(.disable-sort)
{
th th
{ {
position: relative; position: relative;
@ -85,5 +78,4 @@ tr.headings
float: right; float: right;
} }
} }
}
} }

1395
yarn.lock

File diff suppressed because it is too large Load diff