Fix CSS import in demo.

demo/RemoveDemoTable.tsx

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

demo/demo.tsx

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

package.json

@@ -1,5 +1,5 @@
 {
-	"version": "1.0.6",
+	"version": "1.1.2",
 	"name": "@kernelui/smartable",
 	"description": "Kernel UI Smartable.",
 	"scripts": {
@@ -17,22 +17,22 @@
 		"@kernelui:registry": "https://code.zeptotech.net/api/packages/UIKernel/npm/"
 	},
 	"devDependencies": {
-		"@kernelui/core": "^1.5.0",
+		"@kernelui/core": "^1.8.2",
 		"@phosphor-icons/react": "^2.1.7",
 		"@types/node": "^22.0.0",
-		"@types/react": "^18.3.3",
-		"@types/react-dom": "^18.3.0",
-		"@vitejs/plugin-react": "^4.3.0",
+		"@types/react": "^18.3.12",
+		"@types/react-dom": "^18.3.1",
+		"@vitejs/plugin-react": "^4.3.4",
 		"less": "^4.2.0",
 		"react": "^18.3.1",
 		"react-dom": "^18.3.1",
-		"react-router-dom": "^6.26.2",
+		"react-router-dom": "^7.0.1",
 		"typescript": "^5.4.5",
-		"vite": "^5.2.11",
-		"vite-plugin-dts": "^3.9.1"
+		"vite": "^6.0.1",
+		"vite-plugin-dts": "^4.3.0"
 	},
 	"peerDependencies": {
-		"@kernelui/core": "^1.1.2"
+		"@kernelui/core": "^1.8.2"
 	},
 	"packageManager": "yarn@4.5.0"
 }

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.
@@ -66,10 +66,10 @@ export function PaginatedInstance<CK extends ColumnKey>(props: InstancePropertie
 /**
  * Base component for a Smartable table.
  */
-export function Table<CK extends ColumnKey>({columns, children}: React.PropsWithChildren<InstanceProperties<CK>>)
+export function Table<CK extends ColumnKey>({className, columns, children}: React.PropsWithChildren<InstanceProperties<CK>>)
 {
 	return (
-		<table className={"smartable"}>
+		<table className={classes("smartable", className)}>
 			<thead>
 			<ColumnsHeadings columns={columns} />
 			</thead>
@@ -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,6 +99,8 @@ export function ColumnsHeadings<CK extends ColumnKey>({columns}: {columns: Colum
 					))
 				}
 			</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]) => (
@@ -107,6 +112,8 @@ export function ColumnsHeadings<CK extends ColumnKey>({columns}: {columns: Colum
 							))
 						}
 					</tr>
+				)
+			}
 		</>
 	);
 }

src/Smartable/Smartable.tsx

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

src/styles/_headings.less

@@ -1,4 +1,11 @@
 tr.headings
+{
+	&.disable-sort
+	{
+		th { pointer-events: none; }
+	}
+
+	&:not(.disable-sort)
 	{
 		th
 		{
@@ -79,3 +86,4 @@ tr.headings
 			}
 		}
 	}
+}