diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md index 79f942c5..ffd5e15d 100644 --- a/COMPONENT_INDEX.md +++ b/COMPONENT_INDEX.md @@ -899,7 +899,7 @@ export interface DataTableEmptyHeader { key: DataTableKey; empty: boolean; display?: (item: Value) => DataTableValue; - sort?: (a: DataTableValue, b: DataTableValue) => 0 | -1 | 1; + sort?: false | ((a: DataTableValue, b: DataTableValue) => 0 | -1 | 1); columnMenu?: boolean; } @@ -907,7 +907,7 @@ export interface DataTableNonEmptyHeader { key: DataTableKey; value: DataTableValue; display?: (item: Value) => DataTableValue; - sort?: (a: DataTableValue, b: DataTableValue) => 0 | -1 | 1; + sort?: false | ((a: DataTableValue, b: DataTableValue) => 0 | -1 | 1); columnMenu?: boolean; } @@ -957,16 +957,16 @@ export interface DataTableCell { ### Events -| Event name | Type | Detail | -| :------------------- | :--------- | :----------------------------------------------------------------------------------------------------- | -| click | dispatched | { header?: DataTableHeader; row?: DataTableRow; cell?: DataTableCell; } | -| click:header--expand | dispatched | { expanded: boolean; } | -| click:header | dispatched | { header: DataTableHeader; sortDirection: "ascending" | "descending" | "none" } | -| click:row | dispatched | DataTableRow | -| mouseenter:row | dispatched | DataTableRow | -| mouseleave:row | dispatched | DataTableRow | -| click:row--expand | dispatched | { expanded: boolean; row: DataTableRow; } | -| click:cell | dispatched | DataTableCell | +| Event name | Type | Detail | +| :------------------- | :--------- | :------------------------------------------------------------------------------------------------------ | +| click | dispatched | { header?: DataTableHeader; row?: DataTableRow; cell?: DataTableCell; } | +| click:header--expand | dispatched | { expanded: boolean; } | +| click:header | dispatched | { header: DataTableHeader; sortDirection?: "ascending" | "descending" | "none" } | +| click:row | dispatched | DataTableRow | +| mouseenter:row | dispatched | DataTableRow | +| mouseleave:row | dispatched | DataTableRow | +| click:row--expand | dispatched | { expanded: boolean; row: DataTableRow; } | +| click:cell | dispatched | DataTableCell | ## `DataTableSkeleton` @@ -3772,11 +3772,12 @@ None. ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------------- | :--------------- | :------- | :------------------------ | ------------------------------------------------ | ------------------------------------ | -| scope | let | No | string | "col" | Specify the `scope` attribute | -| translateWithId | let | No | () => string | () => "" | Override the default id translations | -| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the top-level element | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :-------------- | :--------------- | :------- | :------------------------ | ------------------------------------------------ | ------------------------------------------------------ | +| disableSorting | let | No | boolean | false | Set to `true` to disable sorting on this specific cell | +| scope | let | No | string | "col" | Specify the `scope` attribute | +| translateWithId | let | No | () => string | () => "" | Override the default id translations | +| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the top-level element | ### Slots diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json index 84d3cc89..106ca4c0 100644 --- a/docs/src/COMPONENT_API.json +++ b/docs/src/COMPONENT_API.json @@ -2081,7 +2081,7 @@ { "type": "dispatched", "name": "click:header", - "detail": "{ header: DataTableHeader; sortDirection: \"ascending\" | \"descending\" | \"none\" }" + "detail": "{ header: DataTableHeader; sortDirection?: \"ascending\" | \"descending\" | \"none\" }" }, { "type": "dispatched", "name": "click:row", "detail": "DataTableRow" }, { @@ -2117,14 +2117,14 @@ "ts": "type DataTableValue = any" }, { - "type": "{ key: DataTableKey; empty: boolean; display?: (item: Value) => DataTableValue; sort?: (a: DataTableValue, b: DataTableValue) => (0 | -1 | 1); columnMenu?: boolean; }", + "type": "{ key: DataTableKey; empty: boolean; display?: (item: Value) => DataTableValue; sort?: false | ((a: DataTableValue, b: DataTableValue) => (0 | -1 | 1)); columnMenu?: boolean; }", "name": "DataTableEmptyHeader", - "ts": "interface DataTableEmptyHeader { key: DataTableKey; empty: boolean; display?: (item: Value) => DataTableValue; sort?: (a: DataTableValue, b: DataTableValue) => (0 | -1 | 1); columnMenu?: boolean; }" + "ts": "interface DataTableEmptyHeader { key: DataTableKey; empty: boolean; display?: (item: Value) => DataTableValue; sort?: false | ((a: DataTableValue, b: DataTableValue) => (0 | -1 | 1)); columnMenu?: boolean; }" }, { - "type": "{ key: DataTableKey; value: DataTableValue; display?: (item: Value) => DataTableValue; sort?: (a: DataTableValue, b: DataTableValue) => (0 | -1 | 1); columnMenu?: boolean; }", + "type": "{ key: DataTableKey; value: DataTableValue; display?: (item: Value) => DataTableValue; sort?: false | ((a: DataTableValue, b: DataTableValue) => (0 | -1 | 1)); columnMenu?: boolean; }", "name": "DataTableNonEmptyHeader", - "ts": "interface DataTableNonEmptyHeader { key: DataTableKey; value: DataTableValue; display?: (item: Value) => DataTableValue; sort?: (a: DataTableValue, b: DataTableValue) => (0 | -1 | 1); columnMenu?: boolean; }" + "ts": "interface DataTableNonEmptyHeader { key: DataTableKey; value: DataTableValue; display?: (item: Value) => DataTableValue; sort?: false | ((a: DataTableValue, b: DataTableValue) => (0 | -1 | 1)); columnMenu?: boolean; }" }, { "type": "DataTableNonEmptyHeader | DataTableEmptyHeader", @@ -9441,6 +9441,16 @@ "moduleName": "TableHeader", "filePath": "src/DataTable/TableHeader.svelte", "props": [ + { + "name": "disableSorting", + "kind": "let", + "description": "Set to `true` to disable sorting on this specific cell", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, { "name": "scope", "kind": "let", diff --git a/docs/src/pages/components/DataTable.svx b/docs/src/pages/components/DataTable.svx index 91363b36..ba6a9abd 100644 --- a/docs/src/pages/components/DataTable.svx +++ b/docs/src/pages/components/DataTable.svx @@ -550,12 +550,18 @@ The slot name for the table header cells is `"cell-header"`. ### Sortable +Set `sortable` to `true` to enable table column sorting. + +To disable sorting on a specific column, set `sort` to `false` in the header object passed to `headers`. + +In the example below, the "Rule" column is not sortable. + {:else} {header.value} diff --git a/src/DataTable/TableHeader.svelte b/src/DataTable/TableHeader.svelte index 0a56d48b..386eaa06 100644 --- a/src/DataTable/TableHeader.svelte +++ b/src/DataTable/TableHeader.svelte @@ -1,4 +1,7 @@ -{#if $tableSortable} +{#if $tableSortable && !disableSorting} DataTableValue; - sort?: (a: DataTableValue, b: DataTableValue) => 0 | -1 | 1; + sort?: false | ((a: DataTableValue, b: DataTableValue) => 0 | -1 | 1); columnMenu?: boolean; } @@ -17,7 +17,7 @@ export interface DataTableNonEmptyHeader { key: DataTableKey; value: DataTableValue; display?: (item: Value) => DataTableValue; - sort?: (a: DataTableValue, b: DataTableValue) => 0 | -1 | 1; + sort?: false | ((a: DataTableValue, b: DataTableValue) => 0 | -1 | 1); columnMenu?: boolean; } @@ -141,7 +141,7 @@ export default class DataTable extends SvelteComponentTyped< ["click:header--expand"]: CustomEvent<{ expanded: boolean }>; ["click:header"]: CustomEvent<{ header: DataTableHeader; - sortDirection: "ascending" | "descending" | "none"; + sortDirection?: "ascending" | "descending" | "none"; }>; ["click:row"]: CustomEvent; ["mouseenter:row"]: CustomEvent; diff --git a/types/DataTable/TableHeader.d.ts b/types/DataTable/TableHeader.d.ts index b3037a88..70926487 100644 --- a/types/DataTable/TableHeader.d.ts +++ b/types/DataTable/TableHeader.d.ts @@ -3,6 +3,12 @@ import { SvelteComponentTyped } from "svelte"; export interface TableHeaderProps extends svelte.JSX.HTMLAttributes { + /** + * Set to `true` to disable sorting on this specific cell + * @default false + */ + disableSorting?: boolean; + /** * Specify the `scope` attribute * @default "col"