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

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

Merged
merged 2 commits into from
Nov 26, 2020
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a450b83
feat(data-table-skeleton): support object type for headers
metonym Nov 26, 2020
28f2d81
fix(data-table): require "id" in DataTableRow interface
metonym Nov 26, 2020
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
23 changes: 13 additions & 10 deletions COMPONENT_INDEX.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand Down Expand Up @@ -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

Expand Down
16 changes: 10 additions & 6 deletions docs/src/COMPONENT_API.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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,
Expand All @@ -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",
Expand Down
8 changes: 8 additions & 0 deletions docs/src/pages/components/DataTable.svx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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" },
Expand Down Expand Up @@ -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} />
Expand Down
2 changes: 1 addition & 1 deletion src/DataTable/DataTable.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
24 changes: 16 additions & 8 deletions src/DataTableSkeleton/DataTableSkeleton.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 */
Expand All @@ -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
Expand Down Expand Up @@ -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>
Expand Down
7 changes: 7 additions & 0 deletions tests/DataTable.test.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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" />
Expand Down
5 changes: 4 additions & 1 deletion types/DataTable/DataTable.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand Down
10 changes: 7 additions & 3 deletions types/DataTableSkeleton/DataTableSkeleton.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
Expand Down Expand Up @@ -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
Expand Down