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

expand headers type in DataTableSkeleton, fix DataTableRow type to require "id" (#415)

Browse source 
* feat(data-table-skeleton): support object type for headers

* fix(data-table): require "id" in DataTableRow interface
This commit is contained in:
Eric Liu 2020-11-26 10:28:07 -08:00 • committed by GitHub
commit 71c15db2ca
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 66 additions and 29 deletions
Download patch file Download diff file Expand all files Collapse all files

23
COMPONENT_INDEX.md
View file

@ -779,7 +779,10 @@ export interface DataTableNonEmptyHeader {
export type DataTableHeader = DataTableNonEmptyHeader | DataTableEmptyHeader;
export type DataTableRow = Record<DataTableKey, DataTableValue>;
export interface DataTableRow {
id: any;
[key: string]: DataTableValue;
}
export type DataTableRowId = string;
@ -835,15 +838,15 @@ export interface DataTableCell {
### Props
| Prop name | Kind | Reactive | Type | Default value | Description |
| :---------- | :--------------- | :------- | :-------------------------------------------------- | ------------------ | ------------------------------------------------------------------------------- |
| columns | <code>let</code> | No | <code>number</code> | <code>5</code> | Specify the number of columns |
| rows | <code>let</code> | No | <code>number</code> | <code>5</code> | Specify the number of rows |
| size | <code>let</code> | No | <code>"compact" &#124; "short" &#124; "tall"</code> | -- | Set the size of the data table |
| zebra | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to apply zebra styles to the datatable rows |
| showHeader | <code>let</code> | No | <code>boolean</code> | <code>true</code> | Set to `false` to hide the header |
| headers | <code>let</code> | No | <code>string[]</code> | <code>[]</code> | Set the column headers<br />If `headers` has one more items, `count` is ignored |
| showToolbar | <code>let</code> | No | <code>boolean</code> | <code>true</code> | Set to `false` to hide the toolbar |
| Prop name | Kind | Reactive | Type | Default value | Description |
| :---------- | :--------------- | :------- | :------------------------------------------------------ | ------------------ | -------------------------------------------------------------------------------------------- |
| columns | <code>let</code> | No | <code>number</code> | <code>5</code> | Specify the number of columns<br />Superseded by `headers` if `headers` is a non-empty array |
| rows | <code>let</code> | No | <code>number</code> | <code>5</code> | Specify the number of rows |
| size | <code>let</code> | No | <code>"compact" &#124; "short" &#124; "tall"</code> | -- | Set the size of the data table |
| zebra | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to apply zebra styles to the datatable rows |
| showHeader | <code>let</code> | No | <code>boolean</code> | <code>true</code> | Set to `false` to hide the header |
| headers | <code>let</code> | No | <code>string[] &#124; Partial<DataTableHeader>[]</code> | <code>[]</code> | Set the column headers<br />Supersedes `columns` if value is a non-empty array |
| showToolbar | <code>let</code> | No | <code>boolean</code> | <code>true</code> | Set to `false` to hide the toolbar |
### Slots

16
docs/src/COMPONENT_API.json
View file

@ -2655,9 +2655,9 @@
"ts": "type DataTableHeader = DataTableNonEmptyHeader | DataTableEmptyHeader"
},
{
"type": "Record<DataTableKey, DataTableValue>",
"type": "{ id: any; [key: string]: DataTableValue; }",
"name": "DataTableRow",
"ts": "type DataTableRow = Record<DataTableKey, DataTableValue>"
"ts": "interface DataTableRow { id: any; [key: string]: DataTableValue; }"
},
{
"type": "string",
@ -3281,7 +3281,7 @@
{
"name": "columns",
"kind": "let",
"description": "Specify the number of columns",
"description": "Specify the number of columns\nSuperseded by `headers` if `headers` is a non-empty array",
"type": "number",
"value": "5",
"isFunction": false,
@ -3330,8 +3330,8 @@
{
"name": "headers",
"kind": "let",
"description": "Set the column headers\nIf `headers` has one more items, `count` is ignored",
"type": "string[]",
"description": "Set the column headers\nSupersedes `columns` if value is a non-empty array",
"type": "string[] | Partial<DataTableHeader>[]",
"value": "[]",
"isFunction": false,
"constant": false,
@ -3356,7 +3356,11 @@
{ "type": "forwarded", "name": "mouseleave", "element": "table" }
],
"typedefs": [],
"rest_props": { "type": "Element", "name": "table" }
"rest_props": { "type": "Element", "name": "table" },
"extends": {
"interface": "DataTableHeader",
"import": "\"../DataTable/DataTable\""
}
},
{
"moduleName": "DatePicker",

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

@ -10,6 +10,8 @@ components: ["DataTable", "Toolbar", "ToolbarContent", "ToolbarSearch", "Toolbar
### Default
The `DataTable` is keyed for both rendering and sorting. You must define a "key" value per object in the `headers` property and an "id" value in `rows`.
<DataTable
headers="{[
{ key: "name", value: "Name" },
@ -824,6 +826,12 @@ In the following example, each row in the sortable data table has an overflow me
<DataTableSkeleton headers={["Name", "Protocol", "Port", "Rule"]} rows={10} />
### Skeleton with object headers
`headers` can also be an array of objects. The type is the same as the `headers` prop type used in `DataTable`.
<DataTableSkeleton headers={[{ value: "Name" }, {value: "Protocol"}, {value:"Port"}, { value: "Rule"}]} rows={10} />
### Skeleton without header, toolbar
<DataTableSkeleton showHeader={false} showToolbar={false} />

2
src/DataTable/DataTable.svelte
View file

@ -5,7 +5,7 @@
* @typedef {{ key: DataTableKey; empty: boolean; display?: (item: Value) => DataTableValue; sort?: (a: DataTableValue, b: DataTableValue) => (0 | -1 | 1); columnMenu?: boolean; }} DataTableEmptyHeader
* @typedef {{ key: DataTableKey; value: DataTableValue; display?: (item: Value) => DataTableValue; sort?: (a: DataTableValue, b: DataTableValue) => (0 | -1 | 1); columnMenu?: boolean; }} DataTableNonEmptyHeader
* @typedef {DataTableNonEmptyHeader | DataTableEmptyHeader} DataTableHeader
* @typedef {Record<DataTableKey, DataTableValue>} DataTableRow
* @typedef {{ id: any; [key: string]: DataTableValue; }} DataTableRow
* @typedef {string} DataTableRowId
* @typedef {{ key: DataTableKey; value: DataTableValue; }} DataTableCell
* @slot {{ row: DataTableRow; }} expanded-row

24
src/DataTableSkeleton/DataTableSkeleton.svelte
View file

@ -1,5 +1,10 @@
<script>
/** Specify the number of columns */
/** @extends {"../DataTable/DataTable"} DataTableHeader */
/**
* Specify the number of columns
* Superseded by `headers` if `headers` is a non-empty array
*/
export let columns = 5;
/** Specify the number of rows */
@ -19,14 +24,17 @@
/**
* Set the column headers
* If `headers` has one more items, `count` is ignored
* @type {string[]}
* Supersedes `columns` if value is a non-empty array
* @type {string[] | Partial<DataTableHeader>[]}
*/
export let headers = [];
/** Set to `false` to hide the toolbar */
export let showToolbar = true;
$: values = headers.map((header) =>
header.value !== undefined ? header.value : header
);
$: cols = Array.from(
{ length: headers.length > 0 ? headers.length : columns },
(_, i) => i
@ -66,20 +74,20 @@
>
<thead>
<tr>
{#each cols as col, i (col)}
<th>{headers[col] || ''}</th>
{#each cols as col (col)}
<th>{values[col] || ''}</th>
{/each}
</tr>
</thead>
<tbody>
<tr>
{#each cols as col, i (col)}
{#each cols as col (col)}
<td><span></span></td>
{/each}
</tr>
{#each Array.from({ length: rows - 1 }, (_, i) => i) as row, i (row)}
{#each Array.from({ length: rows - 1 }, (_, i) => i) as row (row)}
<tr>
{#each cols as col, j (col)}
{#each cols as col (col)}
<td></td>
{/each}
</tr>

7
tests/DataTable.test.svelte
View file

@ -183,6 +183,13 @@
rows="{10}"
/>
<DataTableSkeleton
headers="{[{ value: 'Name' }, { value: 'Protocol' }, { value: 'Port' }, { value: 'Rule' }]}"
rows="{10}"
/>
<DataTableSkeleton headers="{headers}" rows="{10}" />
<DataTableSkeleton showHeader="{false}" showToolbar="{false}" />
<DataTableSkeleton showHeader="{false}" showToolbar="{false}" size="tall" />

5
types/DataTable/DataTable.d.ts vendored
View file

@ -22,7 +22,10 @@ export interface DataTableNonEmptyHeader {
export type DataTableHeader = DataTableNonEmptyHeader | DataTableEmptyHeader;
export type DataTableRow = Record<DataTableKey, DataTableValue>;
export interface DataTableRow {
id: any;
[key: string]: DataTableValue;
}
export type DataTableRowId = string;

10
types/DataTableSkeleton/DataTableSkeleton.d.ts vendored
View file

@ -1,8 +1,12 @@
/// <reference types="svelte" />
import { DataTableHeader } from "../DataTable/DataTable";
export interface DataTableSkeletonProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["table"]> {
export interface DataTableSkeletonProps
extends DataTableHeader,
svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["table"]> {
/**
* Specify the number of columns
* Superseded by `headers` if `headers` is a non-empty array
* @default 5
*/
columns?: number;
@ -32,10 +36,10 @@ export interface DataTableSkeletonProps extends svelte.JSX.HTMLAttributes<HTMLEl
/**
* Set the column headers
* If `headers` has one more items, `count` is ignored
* Supersedes `columns` if value is a non-empty array
* @default []
*/
headers?: string[];
headers?: string[] | Partial<DataTableHeader>[];
/**
* Set to `false` to hide the toolbar