mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-14 18:01:06 +00:00
Code Issues Projects Releases Packages Wiki Activity

feat(data-table): support generics (#1954)

Browse source 
Co-authored-by: K.Kiyokawa <koichi20110068@gmail.com>
Co-authored-by: brunnerh <brunnerh@users.noreply.github.com>
This commit is contained in:
Eric Liu 2024-11-11 21:10:45 -08:00 • committed by GitHub
commit dd43224119
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
13 changed files with 278 additions and 132 deletions
Download patch file Download diff file Expand all files Collapse all files

53
COMPONENT_INDEX.md
View file

@ -926,31 +926,34 @@ None.
### Types ### Types
```ts ```ts
export type DataTableKey = string; export type DataTableKey<Row = DataTableRow> =
import("./DataTableTypes.d.ts").PropertyPath<Row>;
export type DataTableValue = any; export type DataTableValue = any;
export interface DataTableEmptyHeader { export interface DataTableEmptyHeader<Row = DataTableRow> {
key: DataTableKey; key: DataTableKey<Row> | (string & {});
empty: boolean; empty: boolean;
display?: (item: DataTableValue, row: DataTableRow) => DataTableValue; display?: (item: DataTableValue, row: Row) => DataTableValue;
sort?: false | ((a: DataTableValue, b: DataTableValue) => number); sort?: false | ((a: DataTableValue, b: DataTableValue) => number);
columnMenu?: boolean; columnMenu?: boolean;
width?: string; width?: string;
minWidth?: string; minWidth?: string;
} }
export interface DataTableNonEmptyHeader { export interface DataTableNonEmptyHeader<Row = DataTableRow> {
key: DataTableKey; key: DataTableKey<Row>;
value: DataTableValue; value: DataTableValue;
display?: (item: DataTableValue, row: DataTableRow) => DataTableValue; display?: (item: DataTableValue, row: Row) => DataTableValue;
sort?: false | ((a: DataTableValue, b: DataTableValue) => number); sort?: false | ((a: DataTableValue, b: DataTableValue) => number);
columnMenu?: boolean; columnMenu?: boolean;
width?: string; width?: string;
minWidth?: string; minWidth?: string;
} }
export type DataTableHeader = DataTableNonEmptyHeader | DataTableEmptyHeader; export type DataTableHeader<Row = DataTableRow> =
| DataTableNonEmptyHeader<Row>
| DataTableEmptyHeader<Row>;
export interface DataTableRow { export interface DataTableRow {
id: any; id: any;
@ -959,8 +962,8 @@ export interface DataTableRow {
export type DataTableRowId = any; export type DataTableRowId = any;
export interface DataTableCell { export interface DataTableCell<Row = DataTableRow> {
key: DataTableKey; key: DataTableKey<Row> | (string & {});
value: DataTableValue; value: DataTableValue;
display?: (item: DataTableValue, row: DataTableRow) => DataTableValue; display?: (item: DataTableValue, row: DataTableRow) => DataTableValue;
} }
@ -975,9 +978,9 @@ export interface DataTableCell {
| expandedRowIds | No | <code>let</code> | Yes | <code>ReadonlyArray<DataTableRowId></code> | <code>[]</code> | Specify the row ids to be expanded | | expandedRowIds | No | <code>let</code> | Yes | <code>ReadonlyArray<DataTableRowId></code> | <code>[]</code> | Specify the row ids to be expanded |
| expandable | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` for the expandable variant<br />Automatically set to `true` if `batchExpansion` is `true` | | expandable | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` for the expandable variant<br />Automatically set to `true` if `batchExpansion` is `true` |
| sortDirection | No | <code>let</code> | Yes | <code>"none" &#124; "ascending" &#124; "descending"</code> | <code>"none"</code> | Specify the sort direction | | sortDirection | No | <code>let</code> | Yes | <code>"none" &#124; "ascending" &#124; "descending"</code> | <code>"none"</code> | Specify the sort direction |
| sortKey | No | <code>let</code> | Yes | <code>DataTableKey</code> | <code>null</code> | Specify the header key to sort by | | sortKey | No | <code>let</code> | Yes | <code>DataTableKey<Row></code> | <code>null</code> | Specify the header key to sort by |
| headers | No | <code>let</code> | No | <code>ReadonlyArray<DataTableHeader></code> | <code>[]</code> | Specify the data table headers | | headers | No | <code>let</code> | No | <code>ReadonlyArray<DataTableHeader<Row>></code> | <code>[]</code> | Specify the data table headers |
| rows | No | <code>let</code> | No | <code>ReadonlyArray<DataTableRow></code> | <code>[]</code> | Specify the rows the data table should render<br />keys defined in `headers` are used for the row ids | | rows | No | <code>let</code> | No | <code>ReadonlyArray<Row></code> | <code>[]</code> | Specify the rows the data table should render<br />keys defined in `headers` are used for the row ids |
| size | No | <code>let</code> | No | <code>"compact" &#124; "short" &#124; "medium" &#124; "tall"</code> | <code>undefined</code> | Set the size of the data table | | size | No | <code>let</code> | No | <code>"compact" &#124; "short" &#124; "medium" &#124; "tall"</code> | <code>undefined</code> | Set the size of the data table |
| title | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the title of the data table | | title | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the title of the data table |
| description | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the description of the data table | | description | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the description of the data table |
@ -996,28 +999,28 @@ export interface DataTableCell {
### Slots ### Slots
| Slot name | Default | Props | Fallback | | Slot name | Default | Props | Fallback |
| :----------- | :------ | :--------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------- | | :----------- | :------ | :----------------------------------------------------------------------------------------- | :----------------------------------------------------------------------- |
| -- | Yes | -- | -- | | -- | Yes | -- | -- |
| cell | No | <code>{ row: DataTableRow; cell: DataTableCell; rowIndex: number; cellIndex: number; } </code> | <code>{cell.display ? cell.display(cell.value, row) : cell.value}</code> | | cell | No | <code>{ row: Row; cell: DataTableCell<Row>; rowIndex: number; cellIndex: number; } </code> | <code>{cell.display ? cell.display(cell.value, row) : cell.value}</code> |
| cell-header | No | <code>{ header: DataTableNonEmptyHeader; } </code> | <code>{header.value}</code> | | cell-header | No | <code>{ header: DataTableNonEmptyHeader; } </code> | <code>{header.value}</code> |
| description | No | -- | <code>{description}</code> | | description | No | -- | <code>{description}</code> |
| expanded-row | No | <code>{ row: DataTableRow; } </code> | -- | | expanded-row | No | <code>{ row: Row; } </code> | -- |
| title | No | -- | <code>{title}</code> | | title | No | -- | <code>{title}</code> |
### Events ### Events
| Event name | Type | Detail | | Event name | Type | Detail |
| :------------------- | :--------- | :------------------------------------------------------------------------------------------------------ | | :------------------- | :--------- | :----------------------------------------------------------------------------------------------------------- |
| click | dispatched | <code>{ header?: DataTableHeader; row?: DataTableRow; cell?: DataTableCell; }</code> | | click | dispatched | <code>{ header?: DataTableHeader<Row>; row?: Row; cell?: DataTableCell<Row>; }</code> |
| click:header--expand | dispatched | <code>{ expanded: boolean; }</code> | | click:header--expand | dispatched | <code>{ expanded: boolean; }</code> |
| click:header | dispatched | <code>{ header: DataTableHeader; sortDirection?: "ascending" &#124; "descending" &#124; "none" }</code> | | click:header | dispatched | <code>{ header: DataTableHeader<Row>; sortDirection?: "ascending" &#124; "descending" &#124; "none" }</code> |
| click:header--select | dispatched | <code>{ indeterminate: boolean; selected: boolean; }</code> | | click:header--select | dispatched | <code>{ indeterminate: boolean; selected: boolean; }</code> |
| click:row | dispatched | <code>DataTableRow</code> | | click:row | dispatched | <code>Row</code> |
| mouseenter:row | dispatched | <code>DataTableRow</code> | | mouseenter:row | dispatched | <code>Row</code> |
| mouseleave:row | dispatched | <code>DataTableRow</code> | | mouseleave:row | dispatched | <code>Row</code> |
| click:row--expand | dispatched | <code>{ expanded: boolean; row: DataTableRow; }</code> | | click:row--expand | dispatched | <code>{ expanded: boolean; row: Row; }</code> |
| click:row--select | dispatched | <code>{ selected: boolean; row: DataTableRow; }</code> | | click:row--select | dispatched | <code>{ selected: boolean; row: Row; }</code> |
| click:cell | dispatched | <code>DataTableCell</code> | | click:cell | dispatched | <code>DataTableCell<Row></code> |
## `DataTableSkeleton` ## `DataTableSkeleton`

66
docs/src/COMPONENT_API.json
View file

@ -2381,7 +2381,7 @@
"name": "headers", "name": "headers",
"kind": "let", "kind": "let",
"description": "Specify the data table headers", "description": "Specify the data table headers",
"type": "ReadonlyArray<DataTableHeader>", "type": "ReadonlyArray<DataTableHeader<Row>>",
"value": "[]", "value": "[]",
"isFunction": false, "isFunction": false,
"isFunctionDeclaration": false, "isFunctionDeclaration": false,
@ -2393,7 +2393,7 @@
"name": "rows", "name": "rows",
"kind": "let", "kind": "let",
"description": "Specify the rows the data table should render\nkeys defined in `headers` are used for the row ids", "description": "Specify the rows the data table should render\nkeys defined in `headers` are used for the row ids",
"type": "ReadonlyArray<DataTableRow>", "type": "ReadonlyArray<Row>",
"value": "[]", "value": "[]",
"isFunction": false, "isFunction": false,
"isFunctionDeclaration": false, "isFunctionDeclaration": false,
@ -2464,7 +2464,7 @@
"name": "sortKey", "name": "sortKey",
"kind": "let", "kind": "let",
"description": "Specify the header key to sort by", "description": "Specify the header key to sort by",
"type": "DataTableKey", "type": "DataTableKey<Row>",
"value": "null", "value": "null",
"isFunction": false, "isFunction": false,
"isFunctionDeclaration": false, "isFunctionDeclaration": false,
@ -2648,7 +2648,7 @@
"name": "cell", "name": "cell",
"default": false, "default": false,
"fallback": "{cell.display ? cell.display(cell.value, row) : cell.value}", "fallback": "{cell.display ? cell.display(cell.value, row) : cell.value}",
"slot_props": "{ row: DataTableRow; cell: DataTableCell; rowIndex: number; cellIndex: number; }" "slot_props": "{ row: Row; cell: DataTableCell<Row>; rowIndex: number; cellIndex: number; }"
}, },
{ {
"name": "cell-header", "name": "cell-header",
@ -2665,7 +2665,7 @@
{ {
"name": "expanded-row", "name": "expanded-row",
"default": false, "default": false,
"slot_props": "{ row: DataTableRow; }" "slot_props": "{ row: Row; }"
}, },
{ {
"name": "title", "name": "title",
@ -2678,7 +2678,7 @@
{ {
"type": "dispatched", "type": "dispatched",
"name": "click", "name": "click",
"detail": "{ header?: DataTableHeader; row?: DataTableRow; cell?: DataTableCell; }" "detail": "{ header?: DataTableHeader<Row>; row?: Row; cell?: DataTableCell<Row>; }"
}, },
{ {
"type": "dispatched", "type": "dispatched",
@ -2688,45 +2688,37 @@
{ {
"type": "dispatched", "type": "dispatched",
"name": "click:header", "name": "click:header",
"detail": "{ header: DataTableHeader; sortDirection?: \"ascending\" | \"descending\" | \"none\" }" "detail": "{ header: DataTableHeader<Row>; sortDirection?: \"ascending\" | \"descending\" | \"none\" }"
}, },
{ {
"type": "dispatched", "type": "dispatched",
"name": "click:header--select", "name": "click:header--select",
"detail": "{ indeterminate: boolean; selected: boolean; }" "detail": "{ indeterminate: boolean; selected: boolean; }"
}, },
{ "type": "dispatched", "name": "click:row", "detail": "DataTableRow" }, { "type": "dispatched", "name": "click:row", "detail": "Row" },
{ { "type": "dispatched", "name": "mouseenter:row", "detail": "Row" },
"type": "dispatched", { "type": "dispatched", "name": "mouseleave:row", "detail": "Row" },
"name": "mouseenter:row",
"detail": "DataTableRow"
},
{
"type": "dispatched",
"name": "mouseleave:row",
"detail": "DataTableRow"
},
{ {
"type": "dispatched", "type": "dispatched",
"name": "click:row--expand", "name": "click:row--expand",
"detail": "{ expanded: boolean; row: DataTableRow; }" "detail": "{ expanded: boolean; row: Row; }"
}, },
{ {
"type": "dispatched", "type": "dispatched",
"name": "click:row--select", "name": "click:row--select",
"detail": "{ selected: boolean; row: DataTableRow; }" "detail": "{ selected: boolean; row: Row; }"
}, },
{ {
"type": "dispatched", "type": "dispatched",
"name": "click:cell", "name": "click:cell",
"detail": "DataTableCell" "detail": "DataTableCell<Row>"
} }
], ],
"typedefs": [ "typedefs": [
{ {
"type": "string", "type": "import('./DataTableTypes.d.ts').PropertyPath<Row>",
"name": "DataTableKey", "name": "DataTableKey<Row=DataTableRow>",
"ts": "type DataTableKey = string" "ts": "type DataTableKey<Row=DataTableRow> = import('./DataTableTypes.d.ts').PropertyPath<Row>"
}, },
{ {
"type": "any", "type": "any",
@ -2734,19 +2726,19 @@
"ts": "type DataTableValue = any" "ts": "type DataTableValue = any"
}, },
{ {
"type": "{ key: DataTableKey; empty: boolean; display?: (item: DataTableValue, row: DataTableRow) => DataTableValue; sort?: false | ((a: DataTableValue, b: DataTableValue) => number); columnMenu?: boolean; width?: string; minWidth?: string; }", "type": "{\n key: DataTableKey<Row> | (string & {});\n empty: boolean;\n display?: (item: DataTableValue, row: Row) => DataTableValue;\n sort?: false | ((a: DataTableValue, b: DataTableValue) => number);\n columnMenu?: boolean;\n width?: string;\n minWidth?: string;\n}",
"name": "DataTableEmptyHeader", "name": "DataTableEmptyHeader<Row=DataTableRow>",
"ts": "interface DataTableEmptyHeader { key: DataTableKey; empty: boolean; display?: (item: DataTableValue, row: DataTableRow) => DataTableValue; sort?: false | ((a: DataTableValue, b: DataTableValue) => number); columnMenu?: boolean; width?: string; minWidth?: string; }" "ts": "interface DataTableEmptyHeader<Row=DataTableRow> {\n key: DataTableKey<Row> | (string & {});\n empty: boolean;\n display?: (item: DataTableValue, row: Row) => DataTableValue;\n sort?: false | ((a: DataTableValue, b: DataTableValue) => number);\n columnMenu?: boolean;\n width?: string;\n minWidth?: string;\n}"
}, },
{ {
"type": "{ key: DataTableKey; value: DataTableValue; display?: (item: DataTableValue, row: DataTableRow) => DataTableValue; sort?: false | ((a: DataTableValue, b: DataTableValue) => number); columnMenu?: boolean; width?: string; minWidth?: string; }", "type": "{\n key: DataTableKey<Row>;\n value: DataTableValue;\n display?: (item: DataTableValue, row: Row) => DataTableValue;\n sort?: false | ((a: DataTableValue, b: DataTableValue) => number);\n columnMenu?: boolean;\n width?: string;\n minWidth?: string;\n}",
"name": "DataTableNonEmptyHeader", "name": "DataTableNonEmptyHeader<Row=DataTableRow>",
"ts": "interface DataTableNonEmptyHeader { key: DataTableKey; value: DataTableValue; display?: (item: DataTableValue, row: DataTableRow) => DataTableValue; sort?: false | ((a: DataTableValue, b: DataTableValue) => number); columnMenu?: boolean; width?: string; minWidth?: string; }" "ts": "interface DataTableNonEmptyHeader<Row=DataTableRow> {\n key: DataTableKey<Row>;\n value: DataTableValue;\n display?: (item: DataTableValue, row: Row) => DataTableValue;\n sort?: false | ((a: DataTableValue, b: DataTableValue) => number);\n columnMenu?: boolean;\n width?: string;\n minWidth?: string;\n}"
}, },
{ {
"type": "DataTableNonEmptyHeader | DataTableEmptyHeader", "type": "DataTableNonEmptyHeader<Row> | DataTableEmptyHeader<Row>",
"name": "DataTableHeader", "name": "DataTableHeader<Row=DataTableRow>",
"ts": "type DataTableHeader = DataTableNonEmptyHeader | DataTableEmptyHeader" "ts": "type DataTableHeader<Row=DataTableRow> = DataTableNonEmptyHeader<Row> | DataTableEmptyHeader<Row>"
}, },
{ {
"type": "{ id: any; [key: string]: DataTableValue; }", "type": "{ id: any; [key: string]: DataTableValue; }",
@ -2759,12 +2751,12 @@
"ts": "type DataTableRowId = any" "ts": "type DataTableRowId = any"
}, },
{ {
"type": "{ key: DataTableKey; value: DataTableValue; display?: (item: DataTableValue, row: DataTableRow) => DataTableValue; }", "type": "{\n key: DataTableKey<Row> | (string & {});\n value: DataTableValue;\n display?: (item: DataTableValue, row: DataTableRow) => DataTableValue;\n}",
"name": "DataTableCell", "name": "DataTableCell<Row=DataTableRow>",
"ts": "interface DataTableCell { key: DataTableKey; value: DataTableValue; display?: (item: DataTableValue, row: DataTableRow) => DataTableValue; }" "ts": "interface DataTableCell<Row=DataTableRow> {\n key: DataTableKey<Row> | (string & {});\n value: DataTableValue;\n display?: (item: DataTableValue, row: DataTableRow) => DataTableValue;\n}"
} }
], ],
"generics": null, "generics": ["Row", "Row extends DataTableRow = DataTableRow"],
"rest_props": { "type": "Element", "name": "div" } "rest_props": { "type": "Element", "name": "div" }
}, },
{ {

58
src/DataTable/DataTable.svelte
View file

@ -1,39 +1,61 @@
<script> <script>
/** /**
* @typedef {string} DataTableKey * @generics {Row extends DataTableRow = DataTableRow} Row
* @template {DataTableRow} Row
* @typedef {import('./DataTableTypes.d.ts').PropertyPath<Row>} DataTableKey<Row=DataTableRow>
* @typedef {any} DataTableValue * @typedef {any} DataTableValue
* @typedef {{ key: DataTableKey; empty: boolean; display?: (item: DataTableValue, row: DataTableRow) => DataTableValue; sort?: false | ((a: DataTableValue, b: DataTableValue) => number); columnMenu?: boolean; width?: string; minWidth?: string; }} DataTableEmptyHeader * @typedef {{
* @typedef {{ key: DataTableKey; value: DataTableValue; display?: (item: DataTableValue, row: DataTableRow) => DataTableValue; sort?: false | ((a: DataTableValue, b: DataTableValue) => number); columnMenu?: boolean; width?: string; minWidth?: string; }} DataTableNonEmptyHeader * key: DataTableKey<Row> | (string & {});
* @typedef {DataTableNonEmptyHeader | DataTableEmptyHeader} DataTableHeader * empty: boolean;
* display?: (item: DataTableValue, row: Row) => DataTableValue;
* sort?: false | ((a: DataTableValue, b: DataTableValue) => number);
* columnMenu?: boolean;
* width?: string;
* minWidth?: string;
* }} DataTableEmptyHeader<Row=DataTableRow>
* @typedef {{
* key: DataTableKey<Row>;
* value: DataTableValue;
* display?: (item: DataTableValue, row: Row) => DataTableValue;
* sort?: false | ((a: DataTableValue, b: DataTableValue) => number);
* columnMenu?: boolean;
* width?: string;
* minWidth?: string;
* }} DataTableNonEmptyHeader<Row=DataTableRow>
* @typedef {DataTableNonEmptyHeader<Row> | DataTableEmptyHeader<Row>} DataTableHeader<Row=DataTableRow>
* @typedef {{ id: any; [key: string]: DataTableValue; }} DataTableRow * @typedef {{ id: any; [key: string]: DataTableValue; }} DataTableRow
* @typedef {any} DataTableRowId * @typedef {any} DataTableRowId
* @typedef {{ key: DataTableKey; value: DataTableValue; display?: (item: DataTableValue, row: DataTableRow) => DataTableValue; }} DataTableCell * @typedef {{
* @slot {{ row: DataTableRow; }} expanded-row * key: DataTableKey<Row> | (string & {});
* value: DataTableValue;
* display?: (item: DataTableValue, row: DataTableRow) => DataTableValue;
* }} DataTableCell<Row=DataTableRow>
* @slot {{ row: Row; }} expanded-row
* @slot {{ header: DataTableNonEmptyHeader; }} cell-header * @slot {{ header: DataTableNonEmptyHeader; }} cell-header
* @slot {{ row: DataTableRow; cell: DataTableCell; rowIndex: number; cellIndex: number; }} cell * @slot {{ row: Row; cell: DataTableCell<Row>; rowIndex: number; cellIndex: number; }} cell
* @event {{ header?: DataTableHeader; row?: DataTableRow; cell?: DataTableCell; }} click * @event {{ header?: DataTableHeader<Row>; row?: Row; cell?: DataTableCell<Row>; }} click
* @event {{ expanded: boolean; }} click:header--expand * @event {{ expanded: boolean; }} click:header--expand
* @event {{ header: DataTableHeader; sortDirection?: "ascending" | "descending" | "none" }} click:header * @event {{ header: DataTableHeader<Row>; sortDirection?: "ascending" | "descending" | "none" }} click:header
* @event {{ indeterminate: boolean; selected: boolean; }} click:header--select * @event {{ indeterminate: boolean; selected: boolean; }} click:header--select
* @event {DataTableRow} click:row * @event {Row} click:row
* @event {DataTableRow} mouseenter:row * @event {Row} mouseenter:row
* @event {DataTableRow} mouseleave:row * @event {Row} mouseleave:row
* @event {{ expanded: boolean; row: DataTableRow; }} click:row--expand * @event {{ expanded: boolean; row: Row; }} click:row--expand
* @event {{ selected: boolean; row: DataTableRow; }} click:row--select * @event {{ selected: boolean; row: Row; }} click:row--select
* @event {DataTableCell} click:cell * @event {DataTableCell<Row>} click:cell
* @restProps {div} * @restProps {div}
*/ */
/** /**
* Specify the data table headers * Specify the data table headers
* @type {ReadonlyArray<DataTableHeader>} * @type {ReadonlyArray<DataTableHeader<Row>>}
*/ */
export let headers = []; export let headers = [];
/** /**
* Specify the rows the data table should render * Specify the rows the data table should render
* keys defined in `headers` are used for the row ids * keys defined in `headers` are used for the row ids
* @type {ReadonlyArray<DataTableRow>} * @type {ReadonlyArray<Row>}
*/ */
export let rows = []; export let rows = [];
@ -57,7 +79,7 @@
/** /**
* Specify the header key to sort by * Specify the header key to sort by
* @type {DataTableKey} * @type {DataTableKey<Row>}
*/ */
export let sortKey = null; export let sortKey = null;

18
src/DataTable/DataTableTypes.d.ts vendored Normal file
View file

@ -0,0 +1,18 @@
type PathDepth = [never, 0, 1, 2, ...0[]];
type Join<K, P> = K extends string | number
? P extends string | number
? `${K}${"" extends P ? "" : "."}${P}`
: never
: never;
// For performance, the maximum traversal depth is 10.
export type PropertyPath<T, D extends number = 10> = [D] extends [never]
? never
: T extends object
? {
[K in keyof T]-?: K extends string | number
? `${K}` | Join<K, PropertyPath<T[K], PathDepth[D]>>
: never;
}[keyof T]
: "";

69
tests/DataTable.test.svelte
View file

@ -10,16 +10,15 @@
Button, Button,
Link, Link,
} from "carbon-components-svelte"; } from "carbon-components-svelte";
import type { DataTableHeader } from "carbon-components-svelte/DataTable/DataTable.svelte";
import Launch from "carbon-icons-svelte/lib/Launch.svelte"; import Launch from "carbon-icons-svelte/lib/Launch.svelte";
import type { ComponentProps } from "svelte"; import type { ComponentProps } from "svelte";
const headers: DataTableHeader[] = [ const headers = [
{ key: "name", value: "Name" }, { key: "name", value: "Name" },
{ key: "protocol", value: "Protocol", width: "400px", minWidth: "40%" }, { key: "protocol", value: "Protocol", width: "400px", minWidth: "40%" },
{ key: "port", value: "Port" }, { key: "port", value: "Port" },
{ key: "rule", value: "Rule", sort: false }, { key: "rule", value: "Rule", sort: false },
]; ] as const;
const rows = [ const rows = [
{ {
id: "a", id: "a",
@ -285,3 +284,67 @@
<DataTableSkeleton showHeader="{false}" showToolbar="{false}" size="short" /> <DataTableSkeleton showHeader="{false}" showToolbar="{false}" size="short" />
<DataTableSkeleton showHeader="{false}" showToolbar="{false}" size="compact" /> <DataTableSkeleton showHeader="{false}" showToolbar="{false}" size="compact" />
<DataTable
rows="{[
{
name: 'Load Balancer 3',
protocol: 'HTTP',
port: 3000,
rule: 'Round robin',
id: '-',
},
]}"
headers="{[
{
key: 'name',
value: 'Name',
},
{
key: 'protocol',
value: 'Protocol',
display: (value) => {
return value + ' Protocol';
},
},
{
key: 'port',
value: 'Port',
display: (value, row) => {
console.log(row.port);
return value + ' €';
},
sort: (a, b) => {
if (a > b) return 1;
return 0;
},
},
{
key: 'rule',
value: 'Rule',
},
]}"
sortKey="name"
on:click:row="{(e) => {
const detail = e.detail;
detail.name;
detail.port;
}}"
on:click:cell="{(e) => {
const detail = e.detail;
switch (detail.key) {
case 'name':
detail.value;
break;
}
}}"
on:click="{(e) => {
e.detail.cell;
e.detail.row?.name;
}}"
on:click:row--expand="{(e) => {
const detail = e.detail;
detail.row.id;
detail.row.name;
}}"
/>

2
tests/DataTableAppendColumns.test.svelte
View file

@ -6,7 +6,7 @@
{ key: "port", value: "Port" }, { key: "port", value: "Port" },
{ key: "rule", value: "Rule" }, { key: "rule", value: "Rule" },
{ key: "overflow", empty: true }, { key: "overflow", empty: true },
]; ] as const;
const rows = [ const rows = [
{ id: "a", name: "Load Balancer 3", port: 3000, rule: "Round robin" }, { id: "a", name: "Load Balancer 3", port: 3000, rule: "Round robin" },

2
tests/DataTableBatchSelection.test.svelte
View file

@ -5,7 +5,7 @@
{ key: "name", value: "Name" }, { key: "name", value: "Name" },
{ key: "port", value: "Port" }, { key: "port", value: "Port" },
{ key: "rule", value: "Rule" }, { key: "rule", value: "Rule" },
]; ] as const;
const rows = [ const rows = [
{ id: "a", name: "Load Balancer 3", port: 3000, rule: "Round robin" }, { id: "a", name: "Load Balancer 3", port: 3000, rule: "Round robin" },

2
tests/DataTableBatchSelectionToolbar.test.svelte
View file

@ -15,7 +15,7 @@
{ key: "name", value: "Name" }, { key: "name", value: "Name" },
{ key: "port", value: "Port" }, { key: "port", value: "Port" },
{ key: "rule", value: "Rule" }, { key: "rule", value: "Rule" },
]; ] as const;
const rows = [ const rows = [
{ id: "a", name: "Load Balancer 3", port: 3000, rule: "Round robin" }, { id: "a", name: "Load Balancer 3", port: 3000, rule: "Round robin" },

30
tests/DataTableNestedHeaders.test.svelte Normal file
View file

@ -0,0 +1,30 @@
<script lang="ts">
import { DataTable } from "../types";
</script>
<DataTable
headers="{[
{ key: 'name', value: 'Name' },
{ key: 'protocol', value: 'Protocol', width: '400px', minWidth: '40%' },
{ key: 'port', value: 'Port' },
{ key: 'rule.name', value: 'Rule', sort: false },
]}"
rows="{[
{
id: 'a',
name: 'Load Balancer 3',
protocol: 'HTTP',
port: 3000,
'rule.name': 'Round robin',
},
]}"
>
<span slot="cell" let:cell let:row>
{cell.key === "rule.name"}
{#if cell.key === "name"}
{row.name} {row.id}
{:else}
{cell.value}
{/if}
</span>
</DataTable>

2
tests/RadioSelectableDataTable.test.svelte
View file

@ -5,7 +5,7 @@
{ key: "name", value: "Name" }, { key: "name", value: "Name" },
{ key: "port", value: "Port" }, { key: "port", value: "Port" },
{ key: "rule", value: "Rule" }, { key: "rule", value: "Rule" },
]; ] as const;
const rows = [ const rows = [
{ id: "a", name: "Load Balancer 3", port: 3000, rule: "Round robin" }, { id: "a", name: "Load Balancer 3", port: 3000, rule: "Round robin" },

2
tests/SelectableDataTable.test.svelte
View file

@ -5,7 +5,7 @@
{ key: "name", value: "Name" }, { key: "name", value: "Name" },
{ key: "port", value: "Port" }, { key: "port", value: "Port" },
{ key: "rule", value: "Rule" }, { key: "rule", value: "Rule" },
]; ] as const;
const rows = [ const rows = [
{ id: "a", name: "Load Balancer 3", port: 3000, rule: "Round robin" }, { id: "a", name: "Load Balancer 3", port: 3000, rule: "Round robin" },

72
types/DataTable/DataTable.svelte.d.ts vendored
View file

@ -1,31 +1,34 @@
import type { SvelteComponentTyped } from "svelte"; import type { SvelteComponentTyped } from "svelte";
import type { SvelteHTMLElements } from "svelte/elements"; import type { SvelteHTMLElements } from "svelte/elements";
export type DataTableKey = string; export type DataTableKey<Row = DataTableRow> =
import("./DataTableTypes.d.ts").PropertyPath<Row>;
export type DataTableValue = any; export type DataTableValue = any;
export interface DataTableEmptyHeader { export interface DataTableEmptyHeader<Row = DataTableRow> {
key: DataTableKey; key: DataTableKey<Row> | (string & {});
empty: boolean; empty: boolean;
display?: (item: DataTableValue, row: DataTableRow) => DataTableValue; display?: (item: DataTableValue, row: Row) => DataTableValue;
sort?: false | ((a: DataTableValue, b: DataTableValue) => number); sort?: false | ((a: DataTableValue, b: DataTableValue) => number);
columnMenu?: boolean; columnMenu?: boolean;
width?: string; width?: string;
minWidth?: string; minWidth?: string;
} }
export interface DataTableNonEmptyHeader { export interface DataTableNonEmptyHeader<Row = DataTableRow> {
key: DataTableKey; key: DataTableKey<Row>;
value: DataTableValue; value: DataTableValue;
display?: (item: DataTableValue, row: DataTableRow) => DataTableValue; display?: (item: DataTableValue, row: Row) => DataTableValue;
sort?: false | ((a: DataTableValue, b: DataTableValue) => number); sort?: false | ((a: DataTableValue, b: DataTableValue) => number);
columnMenu?: boolean; columnMenu?: boolean;
width?: string; width?: string;
minWidth?: string; minWidth?: string;
} }
export type DataTableHeader = DataTableNonEmptyHeader | DataTableEmptyHeader; export type DataTableHeader<Row = DataTableRow> =
| DataTableNonEmptyHeader<Row>
| DataTableEmptyHeader<Row>;
export interface DataTableRow { export interface DataTableRow {
id: any; id: any;
@ -34,27 +37,27 @@ export interface DataTableRow {
export type DataTableRowId = any; export type DataTableRowId = any;
export interface DataTableCell { export interface DataTableCell<Row = DataTableRow> {
key: DataTableKey; key: DataTableKey<Row> | (string & {});
value: DataTableValue; value: DataTableValue;
display?: (item: DataTableValue, row: DataTableRow) => DataTableValue; display?: (item: DataTableValue, row: DataTableRow) => DataTableValue;
} }
type $RestProps = SvelteHTMLElements["div"]; type $RestProps = SvelteHTMLElements["div"];
type $Props = { type $Props<Row> = {
/** /**
* Specify the data table headers * Specify the data table headers
* @default [] * @default []
*/ */
headers?: ReadonlyArray<DataTableHeader>; headers?: ReadonlyArray<DataTableHeader<Row>>;
/** /**
* Specify the rows the data table should render * Specify the rows the data table should render
* keys defined in `headers` are used for the row ids * keys defined in `headers` are used for the row ids
* @default [] * @default []
*/ */
rows?: ReadonlyArray<DataTableRow>; rows?: ReadonlyArray<Row>;
/** /**
* Set the size of the data table * Set the size of the data table
@ -90,7 +93,7 @@ type $Props = {
* Specify the header key to sort by * Specify the header key to sort by
* @default null * @default null
*/ */
sortKey?: DataTableKey; sortKey?: DataTableKey<Row>;
/** /**
* Specify the sort direction * Specify the sort direction
@ -181,49 +184,46 @@ type $Props = {
[key: `data-${string}`]: any; [key: `data-${string}`]: any;
}; };
export type DataTableProps = Omit<$RestProps, keyof $Props> & $Props; export type DataTableProps<Row> = Omit<$RestProps, keyof $Props<Row>> &
$Props<Row>;
export default class DataTable extends SvelteComponentTyped< export default class DataTable<
DataTableProps, Row extends DataTableRow = DataTableRow,
> extends SvelteComponentTyped<
DataTableProps<Row>,
{ {
click: CustomEvent<{ click: CustomEvent<{
header?: DataTableHeader; header?: DataTableHeader<Row>;
row?: DataTableRow; row?: Row;
cell?: DataTableCell; cell?: DataTableCell<Row>;
}>; }>;
["click:header--expand"]: CustomEvent<{ expanded: boolean }>; ["click:header--expand"]: CustomEvent<{ expanded: boolean }>;
["click:header"]: CustomEvent<{ ["click:header"]: CustomEvent<{
header: DataTableHeader; header: DataTableHeader<Row>;
sortDirection?: "ascending" | "descending" | "none"; sortDirection?: "ascending" | "descending" | "none";
}>; }>;
["click:header--select"]: CustomEvent<{ ["click:header--select"]: CustomEvent<{
indeterminate: boolean; indeterminate: boolean;
selected: boolean; selected: boolean;
}>; }>;
["click:row"]: CustomEvent<DataTableRow>; ["click:row"]: CustomEvent<Row>;
["mouseenter:row"]: CustomEvent<DataTableRow>; ["mouseenter:row"]: CustomEvent<Row>;
["mouseleave:row"]: CustomEvent<DataTableRow>; ["mouseleave:row"]: CustomEvent<Row>;
["click:row--expand"]: CustomEvent<{ ["click:row--expand"]: CustomEvent<{ expanded: boolean; row: Row }>;
expanded: boolean; ["click:row--select"]: CustomEvent<{ selected: boolean; row: Row }>;
row: DataTableRow; ["click:cell"]: CustomEvent<DataTableCell<Row>>;
}>;
["click:row--select"]: CustomEvent<{
selected: boolean;
row: DataTableRow;
}>;
["click:cell"]: CustomEvent<DataTableCell>;
}, },
{ {
default: {}; default: {};
cell: { cell: {
row: DataTableRow; row: Row;
cell: DataTableCell; cell: DataTableCell<Row>;
rowIndex: number; rowIndex: number;
cellIndex: number; cellIndex: number;
}; };
["cell-header"]: { header: DataTableNonEmptyHeader }; ["cell-header"]: { header: DataTableNonEmptyHeader };
description: {}; description: {};
["expanded-row"]: { row: DataTableRow }; ["expanded-row"]: { row: Row };
title: {}; title: {};
} }
> {} > {}

18
types/DataTable/DataTableTypes.d.ts vendored Normal file
View file

@ -0,0 +1,18 @@
type PathDepth = [never, 0, 1, 2, ...0[]];
type Join<K, P> = K extends string | number
? P extends string | number
? `${K}${"" extends P ? "" : "."}${P}`
: never
: never;
// For performance, the maximum traversal depth is 10.
export type PropertyPath<T, D extends number = 10> = [D] extends [never]
? never
: T extends object
? {
[K in keyof T]-?: K extends string | number
? `${K}` | Join<K, PropertyPath<T[K], PathDepth[D]>>
: never;
}[keyof T]
: "";