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"
|