Skip to content

Commit

Permalink
feat(data-table): support generics (#1954)
Browse files Browse the repository at this point in the history 
Co-authored-by: K.Kiyokawa <[email protected]>
Co-authored-by: brunnerh <[email protected]>
  • Loading branch information
@metonym @KoichiKiyokawa @brunnerh
3 people authored Nov 12, 2024
1 parent 752c46b commit dd43224
Show file tree
Hide file tree
Showing 13 changed files with 278 additions and 132 deletions.
69 changes: 36 additions & 33 deletions COMPONENT_INDEX.md
View file
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
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

0 comments on commit dd43224

Please sign in to comment.