mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-19 03:49:34 +00:00
Code Issues Projects Releases Packages Wiki Activity

feat(data-table): allow sorting to be disabled for a specific header

Browse source
This commit is contained in:
Eric Y Liu 2021-04-02 11:51:32 -07:00
commit 766ee936ed
8 changed files with 79 additions and 46 deletions
Download patch file Download diff file Expand all files Collapse all files

20
docs/src/COMPONENT_API.json
View file

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

8
docs/src/pages/components/DataTable.svx
View file

@ -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.
<DataTable sortable
headers="{[
{ key: "name", value: "Name" },
{ key: "protocol", value: "Protocol" },
{ key: "port", value: "Port" },
{ key: "rule", value: "Rule" }
{ key: "rule", value: "Rule", sort: false }
]}"
rows="{[
{