Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(data-table): support generics #1954

Merged
merged 14 commits into from
Nov 12, 2024
Merged

feat(data-table): support generics #1954

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
1827b6d
feat: typing for DataTable row and cell
KoichiKiyokawa Sep 13, 2021
94262c1
feat(data-table): update JSDocs to use generics
metonym Apr 20, 2024
38df04e
Run "yarn build:docs"
metonym Apr 20, 2024
2527452
test: add `DataTable` generics test
metonym Apr 20, 2024
140e8ff
test: fix existing tests
metonym Apr 20, 2024
e49369e
Tweaks to DataTable generics (#1968)
brunnerh May 4, 2024
ed3a395
test: add nested headers example
metonym May 4, 2024
df1d402
Loosen empty table row header key
metonym May 4, 2024
d6704ec
test(data-table): update test
metonym May 4, 2024
7b46440
tests: revert need to specify empty header key
metonym May 4, 2024
bd6f52c
Change loosened type to `string * {}`
metonym May 4, 2024
69de338
Update value types
metonym Nov 10, 2024
e0ffc97
Add code comment and format DataTableTypes.d.ts
metonym Nov 10, 2024
8578c6d
Update DataTable.svelte.d.ts
metonym Nov 10, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
69 changes: 36 additions & 33 deletions COMPONENT_INDEX.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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;
}
Expand All @@ -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 |
Expand All @@ -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`

Expand Down
66 changes: 29 additions & 37 deletions docs/src/COMPONENT_API.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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,
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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",
Expand All @@ -2665,7 +2665,7 @@
{
"name": "expanded-row",
"default": false,
"slot_props": "{ row: DataTableRow; }"
"slot_props": "{ row: Row; }"
},
{
"name": "title",
Expand All @@ -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",
Expand All @@ -2688,65 +2688,57 @@
{
"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",
"name": "DataTableValue",
"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; }",
Expand All @@ -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" }
},
{
Expand Down
Loading