mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-18 03:26:36 +00:00
Run "yarn build:docs"
This commit is contained in:
Eric Liu
parent
0f9c1ecafa
commit
217d41be6a
3 changed files with 260 additions and 109 deletions
|
|
@ -926,31 +926,33 @@ None.
|
|||
### Types
|
||||
|
||||
```ts
|
||||
export type DataTableKey = string;
|
||||
export type DataTableKey<Row = DataTableRow> = Exclude<keyof Row, "id">;
|
||||
|
||||
export type DataTableValue = any;
|
||||
|
||||
export interface DataTableEmptyHeader {
|
||||
key: DataTableKey;
|
||||
export interface DataTableEmptyHeader<Row = DataTableRow> {
|
||||
key: DataTableKey<Row>;
|
||||
empty: boolean;
|
||||
display?: (item: Value, row: DataTableRow) => DataTableValue;
|
||||
display?: (item: Value, 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: Value, row: DataTableRow) => DataTableValue;
|
||||
display?: (item: Value, 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;
|
||||
|
|
@ -959,8 +961,8 @@ export interface DataTableRow {
|
|||
|
||||
export type DataTableRowId = any;
|
||||
|
||||
export interface DataTableCell {
|
||||
key: DataTableKey;
|
||||
export interface DataTableCell<Row = DataTableRow> {
|
||||
key: DataTableKey<Row>;
|
||||
value: DataTableValue;
|
||||
display?: (item: Value, row: DataTableRow) => DataTableValue;
|
||||
}
|
||||
|
|
@ -975,9 +977,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" | "ascending" | "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" | "short" | "medium" | "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 |
|
||||
|
|
@ -995,29 +997,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" | "descending" | "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" | "descending" | "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`
|
||||
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
42
types/DataTable/DataTable.svelte.d.ts
vendored
42
types/DataTable/DataTable.svelte.d.ts
vendored
|
|
@ -1,33 +1,31 @@
|
|||
import type { SvelteComponentTyped } from "svelte";
|
||||
import type { SvelteHTMLElements } from "svelte/elements";
|
||||
|
||||
export type DataTableKey = string;
|
||||
export type DataTableKey<Row = DataTableRow> = Exclude<keyof Row, "id">;
|
||||
|
||||
export type DataTableValue = any;
|
||||
|
||||
export interface DataTableEmptyHeader<Row extends DataTableRow = DataTableRow> {
|
||||
key: keyof Row;
|
||||
export interface DataTableEmptyHeader<Row = DataTableRow> {
|
||||
key: DataTableKey<Row>;
|
||||
empty: boolean;
|
||||
display?: (item: Value, row: DataTableRow) => DataTableValue;
|
||||
display?: (item: Value, row: Row) => DataTableValue;
|
||||
sort?: false | ((a: DataTableValue, b: DataTableValue) => number);
|
||||
columnMenu?: boolean;
|
||||
width?: string;
|
||||
minWidth?: string;
|
||||
}
|
||||
|
||||
export interface DataTableNonEmptyHeader<
|
||||
Row extends DataTableRow = DataTableRow
|
||||
> {
|
||||
key: keyof Row;
|
||||
export interface DataTableNonEmptyHeader<Row = DataTableRow> {
|
||||
key: DataTableKey<Row>;
|
||||
value: DataTableValue;
|
||||
display?: (item: Value, row: DataTableRow) => DataTableValue;
|
||||
display?: (item: Value, row: Row) => DataTableValue;
|
||||
sort?: false | ((a: DataTableValue, b: DataTableValue) => number);
|
||||
columnMenu?: boolean;
|
||||
width?: string;
|
||||
minWidth?: string;
|
||||
}
|
||||
|
||||
export type DataTableHeader<Row extends DataTableRow = DataTableRow> =
|
||||
export type DataTableHeader<Row = DataTableRow> =
|
||||
| DataTableNonEmptyHeader<Row>
|
||||
| DataTableEmptyHeader<Row>;
|
||||
|
||||
|
|
@ -38,15 +36,15 @@ export interface DataTableRow {
|
|||
|
||||
export type DataTableRowId = any;
|
||||
|
||||
export interface DataTableCell<Row extends DataTableRow = DataTableRow> {
|
||||
key: keyof Row;
|
||||
export interface DataTableCell<Row = DataTableRow> {
|
||||
key: DataTableKey<Row>;
|
||||
value: DataTableValue;
|
||||
display?: (item: Value, row: DataTableRow) => DataTableValue;
|
||||
}
|
||||
|
||||
type RestProps = SvelteHTMLElements["div"];
|
||||
|
||||
export interface DataTableProps extends RestProps {
|
||||
export interface DataTableProps<Row> extends RestProps {
|
||||
/**
|
||||
* Specify the data table headers
|
||||
* @default []
|
||||
|
|
@ -94,7 +92,7 @@ export interface DataTableProps extends RestProps {
|
|||
* Specify the header key to sort by
|
||||
* @default null
|
||||
*/
|
||||
sortKey?: DataTableKey;
|
||||
sortKey?: DataTableKey<Row>;
|
||||
|
||||
/**
|
||||
* Specify the sort direction
|
||||
|
|
@ -207,21 +205,15 @@ export default class DataTable<
|
|||
["click:row"]: CustomEvent<Row>;
|
||||
["mouseenter:row"]: CustomEvent<Row>;
|
||||
["mouseleave:row"]: CustomEvent<Row>;
|
||||
["click:row--expand"]: CustomEvent<{
|
||||
expanded: boolean;
|
||||
row: Row;
|
||||
}>;
|
||||
["click:row--select"]: CustomEvent<{
|
||||
selected: boolean;
|
||||
row: Row;
|
||||
}>;
|
||||
["click:cell"]: CustomEvent<DataTableCell>;
|
||||
["click:row--expand"]: CustomEvent<{ expanded: boolean; row: Row }>;
|
||||
["click:row--select"]: CustomEvent<{ selected: boolean; row: Row }>;
|
||||
["click:cell"]: CustomEvent<DataTableCell<Row>>;
|
||||
},
|
||||
{
|
||||
default: {};
|
||||
cell: {
|
||||
row: DataTableRow;
|
||||
cell: DataTableCell;
|
||||
row: Row;
|
||||
cell: DataTableCell<Row>;
|
||||
rowIndex: number;
|
||||
cellIndex: number;
|
||||
};
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue