mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-14 09:51:36 +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

69
COMPONENT_INDEX.md
View file

@ -926,31 +926,34 @@ None.
### Types
```ts
export type DataTableKey = string;
export type DataTableKey<Row = DataTableRow> =
import("./DataTableTypes.d.ts").PropertyPath<Row>;
export type DataTableValue = any;
export interface DataTableEmptyHeader {
key: DataTableKey;
export interface DataTableEmptyHeader<Row = DataTableRow> {
key: DataTableKey<Row> | (string & {});
empty: boolean;
display?: (item: DataTableValue, row: DataTableRow) => DataTableValue;
display?: (item: DataTableValue, row: Row) => DataTableValue;
sort?: false | ((a: DataTableValue, b: DataTableValue) => number);
columnMenu?: boolean;
width?: string;
minWidth?: string;
}
export interface DataTableNonEmptyHeader {
key: DataTableKey;
export interface DataTableNonEmptyHeader<Row = DataTableRow> {
key: DataTableKey<Row>;
value: DataTableValue;
display?: (item: DataTableValue, row: DataTableRow) => DataTableValue;
display?: (item: DataTableValue, row: Row) => DataTableValue;
sort?: false | ((a: DataTableValue, b: DataTableValue) => number);
columnMenu?: boolean;
width?: string;
minWidth?: string;
}
export type DataTableHeader = DataTableNonEmptyHeader | DataTableEmptyHeader;
export type DataTableHeader<Row = DataTableRow> =
| DataTableNonEmptyHeader<Row>
| DataTableEmptyHeader<Row>;
export interface DataTableRow {
id: any;
@ -959,8 +962,8 @@ export interface DataTableRow {
export type DataTableRowId = any;
export interface DataTableCell {
key: DataTableKey;
export interface DataTableCell<Row = DataTableRow> {
key: DataTableKey<Row> | (string & {});
value: 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 |
| 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 |
| sortKey | No | <code>let</code> | Yes | <code>DataTableKey</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 |
| 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 |
| 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<Row>></code> | <code>[]</code> | Specify the data table headers |
| 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 |
| 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 |
@ -995,29 +998,29 @@ export interface DataTableCell {
### Slots
| Slot name | Default | Props | Fallback |
| :----------- | :------ | :--------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------- |
| -- | 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-header | No | <code>{ header: DataTableNonEmptyHeader; } </code> | <code>{header.value}</code> |
| description | No | -- | <code>{description}</code> |
| expanded-row | No | <code>{ row: DataTableRow; } </code> | -- |
| title | No | -- | <code>{title}</code> |
| Slot name | Default | Props | Fallback |
| :----------- | :------ | :----------------------------------------------------------------------------------------- | :----------------------------------------------------------------------- |
| -- | Yes | -- | -- |
| 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> |
| description | No | -- | <code>{description}</code> |
| expanded-row | No | <code>{ row: Row; } </code> | -- |
| title | No | -- | <code>{title}</code> |
### Events
| Event name | Type | Detail |
| :------------------- | :--------- | :------------------------------------------------------------------------------------------------------ |
| click | dispatched | <code>{ header?: DataTableHeader; row?: DataTableRow; cell?: DataTableCell; }</code> |
| click:header--expand | dispatched | <code>{ expanded: boolean; }</code> |
| click:header | dispatched | <code>{ header: DataTableHeader; sortDirection?: "ascending" &#124; "descending" &#124; "none" }</code> |
| click:header--select | dispatched | <code>{ indeterminate: boolean; selected: boolean; }</code> |
| click:row | dispatched | <code>DataTableRow</code> |
| mouseenter:row | dispatched | <code>DataTableRow</code> |
| mouseleave:row | dispatched | <code>DataTableRow</code> |
| click:row--expand | dispatched | <code>{ expanded: boolean; row: DataTableRow; }</code> |
| click:row--select | dispatched | <code>{ selected: boolean; row: DataTableRow; }</code> |
| click:cell | dispatched | <code>DataTableCell</code> |
| Event name | Type | Detail |
| :------------------- | :--------- | :----------------------------------------------------------------------------------------------------------- |
| click | dispatched | <code>{ header?: DataTableHeader<Row>; row?: Row; cell?: DataTableCell<Row>; }</code> |
| click:header--expand | dispatched | <code>{ expanded: boolean; }</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:row | dispatched | <code>Row</code> |
| mouseenter:row | dispatched | <code>Row</code> |
| mouseleave:row | dispatched | <code>Row</code> |
| click:row--expand | dispatched | <code>{ expanded: boolean; row: Row; }</code> |
| click:row--select | dispatched | <code>{ selected: boolean; row: Row; }</code> |
| click:cell | dispatched | <code>DataTableCell<Row></code> |
## `DataTableSkeleton`

66
docs/src/COMPONENT_API.json
View file

@ -2381,7 +2381,7 @@
"name": "headers",
"kind": "let",
"description": "Specify the data table headers",
"type": "ReadonlyArray<DataTableHeader>",
"type": "ReadonlyArray<DataTableHeader<Row>>",
"value": "[]",
"isFunction": false,
"isFunctionDeclaration": false,
@ -2393,7 +2393,7 @@
"name": "rows",
"kind": "let",
"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": "[]",
"isFunction": false,
"isFunctionDeclaration": false,
@ -2464,7 +2464,7 @@
"name": "sortKey",
"kind": "let",
"description": "Specify the header key to sort by",
"type": "DataTableKey",
"type": "DataTableKey<Row>",
"value": "null",
"isFunction": false,
"isFunctionDeclaration": false,
@ -2648,7 +2648,7 @@
"name": "cell",
"default": false,
"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",
@ -2665,7 +2665,7 @@
{
"name": "expanded-row",
"default": false,
"slot_props": "{ row: DataTableRow; }"
"slot_props": "{ row: Row; }"
},
{
"name": "title",
@ -2678,7 +2678,7 @@
{
"type": "dispatched",
"name": "click",
"detail": "{ header?: DataTableHeader; row?: DataTableRow; cell?: DataTableCell; }"
"detail": "{ header?: DataTableHeader<Row>; row?: Row; cell?: DataTableCell<Row>; }"
},
{
"type": "dispatched",
@ -2688,45 +2688,37 @@
{
"type": "dispatched",
"name": "click:header",
"detail": "{ header: DataTableHeader; sortDirection?: \"ascending\" | \"descending\" | \"none\" }"
"detail": "{ header: DataTableHeader<Row>; sortDirection?: \"ascending\" | \"descending\" | \"none\" }"
},
{
"type": "dispatched",
"name": "click:header--select",
"detail": "{ indeterminate: boolean; selected: boolean; }"
},
{ "type": "dispatched", "name": "click:row", "detail": "DataTableRow" },
{
"type": "dispatched",
"name": "mouseenter:row",
"detail": "DataTableRow"
},
{
"type": "dispatched",
"name": "mouseleave:row",
"detail": "DataTableRow"
},
{ "type": "dispatched", "name": "click:row", "detail": "Row" },
{ "type": "dispatched", "name": "mouseenter:row", "detail": "Row" },
{ "type": "dispatched", "name": "mouseleave:row", "detail": "Row" },
{
"type": "dispatched",
"name": "click:row--expand",
"detail": "{ expanded: boolean; row: DataTableRow; }"
"detail": "{ expanded: boolean; row: Row; }"
},
{
"type": "dispatched",
"name": "click:row--select",
"detail": "{ selected: boolean; row: DataTableRow; }"
"detail": "{ selected: boolean; row: Row; }"
},
{
"type": "dispatched",
"name": "click:cell",
"detail": "DataTableCell"
"detail": "DataTableCell<Row>"
}
],
"typedefs": [
{
"type": "string",
"name": "DataTableKey",
"ts": "type DataTableKey = string"
"type": "import('./DataTableTypes.d.ts').PropertyPath<Row>",
"name": "DataTableKey<Row=DataTableRow>",
"ts": "type DataTableKey<Row=DataTableRow> = import('./DataTableTypes.d.ts').PropertyPath<Row>"
},
{
"type": "any",
@ -2734,19 +2726,19 @@
"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; }",
"name": "DataTableEmptyHeader",
"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; }"
"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<Row=DataTableRow>",
"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; }",
"name": "DataTableNonEmptyHeader",
"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; }"
"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<Row=DataTableRow>",
"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",
"name": "DataTableHeader",
"ts": "type DataTableHeader = DataTableNonEmptyHeader | DataTableEmptyHeader"
"type": "DataTableNonEmptyHeader<Row> | DataTableEmptyHeader<Row>",
"name": "DataTableHeader<Row=DataTableRow>",
"ts": "type DataTableHeader<Row=DataTableRow> = DataTableNonEmptyHeader<Row> | DataTableEmptyHeader<Row>"
},
{
"type": "{ id: any; [key: string]: DataTableValue; }",
@ -2759,12 +2751,12 @@
"ts": "type DataTableRowId = any"
},
{
"type": "{ key: DataTableKey; value: DataTableValue; display?: (item: DataTableValue, row: DataTableRow) => DataTableValue; }",
"name": "DataTableCell",
"ts": "interface DataTableCell { 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<Row=DataTableRow>",
"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" }
},
{

58
src/DataTable/DataTable.svelte
View file

@ -1,39 +1,61 @@
<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 {{ 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 {{ key: DataTableKey; value: DataTableValue; display?: (item: DataTableValue, row: DataTableRow) => DataTableValue; sort?: false | ((a: DataTableValue, b: DataTableValue) => number); columnMenu?: boolean; width?: string; minWidth?: string; }} DataTableNonEmptyHeader
* @typedef {DataTableNonEmptyHeader | DataTableEmptyHeader} DataTableHeader
* @typedef {{
* key: DataTableKey<Row> | (string & {});
* 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 {any} DataTableRowId
* @typedef {{ key: DataTableKey; value: DataTableValue; display?: (item: DataTableValue, row: DataTableRow) => DataTableValue; }} DataTableCell
* @slot {{ row: DataTableRow; }} expanded-row
* @typedef {{
* 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 {{ row: DataTableRow; cell: DataTableCell; rowIndex: number; cellIndex: number; }} cell
* @event {{ header?: DataTableHeader; row?: DataTableRow; cell?: DataTableCell; }} click
* @slot {{ row: Row; cell: DataTableCell<Row>; rowIndex: number; cellIndex: number; }} cell
* @event {{ header?: DataTableHeader<Row>; row?: Row; cell?: DataTableCell<Row>; }} click
* @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 {DataTableRow} click:row
* @event {DataTableRow} mouseenter:row
* @event {DataTableRow} mouseleave:row
* @event {{ expanded: boolean; row: DataTableRow; }} click:row--expand
* @event {{ selected: boolean; row: DataTableRow; }} click:row--select
* @event {DataTableCell} click:cell
* @event {Row} click:row
* @event {Row} mouseenter:row
* @event {Row} mouseleave:row
* @event {{ expanded: boolean; row: Row; }} click:row--expand
* @event {{ selected: boolean; row: Row; }} click:row--select
* @event {DataTableCell<Row>} click:cell
* @restProps {div}
*/
/**
* Specify the data table headers
* @type {ReadonlyArray<DataTableHeader>}
* @type {ReadonlyArray<DataTableHeader<Row>>}
*/
export let headers = [];
/**
* Specify the rows the data table should render
* keys defined in `headers` are used for the row ids
* @type {ReadonlyArray<DataTableRow>}
* @type {ReadonlyArray<Row>}
*/
export let rows = [];
@ -57,7 +79,7 @@
/**
* Specify the header key to sort by
* @type {DataTableKey}
* @type {DataTableKey<Row>}
*/
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,
Link,
} from "carbon-components-svelte";
import type { DataTableHeader } from "carbon-components-svelte/DataTable/DataTable.svelte";
import Launch from "carbon-icons-svelte/lib/Launch.svelte";
import type { ComponentProps } from "svelte";
const headers: DataTableHeader[] = [
const headers = [
{ key: "name", value: "Name" },
{ key: "protocol", value: "Protocol", width: "400px", minWidth: "40%" },
{ key: "port", value: "Port" },
{ key: "rule", value: "Rule", sort: false },
];
] as const;
const rows = [
{
id: "a",
@ -285,3 +284,67 @@
<DataTableSkeleton showHeader="{false}" showToolbar="{false}" size="short" />
<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: "rule", value: "Rule" },
{ key: "overflow", empty: true },
];
] as const;
const rows = [
{ 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: "port", value: "Port" },
{ key: "rule", value: "Rule" },
];
] as const;
const rows = [
{ 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: "port", value: "Port" },
{ key: "rule", value: "Rule" },
];
] as const;
const rows = [
{ 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: "port", value: "Port" },
{ key: "rule", value: "Rule" },
];
] as const;
const rows = [
{ 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: "port", value: "Port" },
{ key: "rule", value: "Rule" },
];
] as const;
const rows = [
{ 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 { SvelteHTMLElements } from "svelte/elements";
export type DataTableKey = string;
export type DataTableKey<Row = DataTableRow> =
import("./DataTableTypes.d.ts").PropertyPath<Row>;
export type DataTableValue = any;
export interface DataTableEmptyHeader {
key: DataTableKey;
export interface DataTableEmptyHeader<Row = DataTableRow> {
key: DataTableKey<Row> | (string & {});
empty: boolean;
display?: (item: DataTableValue, row: DataTableRow) => DataTableValue;
display?: (item: DataTableValue, row: Row) => DataTableValue;
sort?: false | ((a: DataTableValue, b: DataTableValue) => number);
columnMenu?: boolean;
width?: string;
minWidth?: string;
}
export interface DataTableNonEmptyHeader {
key: DataTableKey;
export interface DataTableNonEmptyHeader<Row = DataTableRow> {
key: DataTableKey<Row>;
value: DataTableValue;
display?: (item: DataTableValue, row: DataTableRow) => DataTableValue;
display?: (item: DataTableValue, row: Row) => DataTableValue;
sort?: false | ((a: DataTableValue, b: DataTableValue) => number);
columnMenu?: boolean;
width?: string;
minWidth?: string;
}
export type DataTableHeader = DataTableNonEmptyHeader | DataTableEmptyHeader;
export type DataTableHeader<Row = DataTableRow> =
| DataTableNonEmptyHeader<Row>
| DataTableEmptyHeader<Row>;
export interface DataTableRow {
id: any;
@ -34,27 +37,27 @@ export interface DataTableRow {
export type DataTableRowId = any;
export interface DataTableCell {
key: DataTableKey;
export interface DataTableCell<Row = DataTableRow> {
key: DataTableKey<Row> | (string & {});
value: DataTableValue;
display?: (item: DataTableValue, row: DataTableRow) => DataTableValue;
}
type $RestProps = SvelteHTMLElements["div"];
type $Props = {
type $Props<Row> = {
/**
* Specify the data table headers
* @default []
*/
headers?: ReadonlyArray<DataTableHeader>;
headers?: ReadonlyArray<DataTableHeader<Row>>;
/**
* Specify the rows the data table should render
* keys defined in `headers` are used for the row ids
* @default []
*/
rows?: ReadonlyArray<DataTableRow>;
rows?: ReadonlyArray<Row>;
/**
* Set the size of the data table
@ -90,7 +93,7 @@ type $Props = {
* Specify the header key to sort by
* @default null
*/
sortKey?: DataTableKey;
sortKey?: DataTableKey<Row>;
/**
* Specify the sort direction
@ -181,49 +184,46 @@ type $Props = {
[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<
DataTableProps,
export default class DataTable<
Row extends DataTableRow = DataTableRow,
> extends SvelteComponentTyped<
DataTableProps<Row>,
{
click: CustomEvent<{
header?: DataTableHeader;
row?: DataTableRow;
cell?: DataTableCell;
header?: DataTableHeader<Row>;
row?: Row;
cell?: DataTableCell<Row>;
}>;
["click:header--expand"]: CustomEvent<{ expanded: boolean }>;
["click:header"]: CustomEvent<{
header: DataTableHeader;
header: DataTableHeader<Row>;
sortDirection?: "ascending" | "descending" | "none";
}>;
["click:header--select"]: CustomEvent<{
indeterminate: boolean;
selected: boolean;
}>;
["click:row"]: CustomEvent<DataTableRow>;
["mouseenter:row"]: CustomEvent<DataTableRow>;
["mouseleave:row"]: CustomEvent<DataTableRow>;
["click:row--expand"]: CustomEvent<{
expanded: boolean;
row: DataTableRow;
}>;
["click:row--select"]: CustomEvent<{
selected: boolean;
row: DataTableRow;
}>;
["click:cell"]: CustomEvent<DataTableCell>;
["click:row"]: CustomEvent<Row>;
["mouseenter:row"]: CustomEvent<Row>;
["mouseleave:row"]: CustomEvent<Row>;
["click:row--expand"]: CustomEvent<{ expanded: boolean; row: Row }>;
["click:row--select"]: CustomEvent<{ selected: boolean; row: Row }>;
["click:cell"]: CustomEvent<DataTableCell<Row>>;
},
{
default: {};
cell: {
row: DataTableRow;
cell: DataTableCell;
row: Row;
cell: DataTableCell<Row>;
rowIndex: number;
cellIndex: number;
};
["cell-header"]: { header: DataTableNonEmptyHeader };
description: {};
["expanded-row"]: { row: DataTableRow };
["expanded-row"]: { row: Row };
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]
: "";