mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-18 03:26:36 +00:00
feat(data-table-skeleton): support object type for headers
This commit is contained in:
Eric Liu
parent
4226535338
commit
a450b83bd8
6 changed files with 53 additions and 24 deletions
|
|
@ -835,15 +835,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" | "short" | "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" | "short" | "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[] | 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
|
||||
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -824,6 +824,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} />
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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" />
|
||||
|
|
|
|||
10
types/DataTableSkeleton/DataTableSkeleton.d.ts
vendored
10
types/DataTableSkeleton/DataTableSkeleton.d.ts
vendored
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue