mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-18 03:26:36 +00:00
Code Issues Projects Releases Packages Wiki Activity

Run "yarn build:docs"

Browse source
This commit is contained in:
Eric Liu 2024-04-20 14:59:11 -07:00
commit 217d41be6a
3 changed files with 260 additions and 109 deletions
Download patch file Download diff file Expand all files Collapse all files

68
COMPONENT_INDEX.md
View file

@ -926,31 +926,33 @@ None.
### Types ### Types
```ts ```ts
export type DataTableKey = string; export type DataTableKey<Row = DataTableRow> = Exclude<keyof Row, "id">;
export type DataTableValue = any; export type DataTableValue = any;
export interface DataTableEmptyHeader { export interface DataTableEmptyHeader<Row = DataTableRow> {
key: DataTableKey; key: DataTableKey<Row>;
empty: boolean; empty: boolean;
display?: (item: Value, row: DataTableRow) => DataTableValue; display?: (item: Value, row: Row) => DataTableValue;
sort?: false | ((a: DataTableValue, b: DataTableValue) => number); sort?: false | ((a: DataTableValue, b: DataTableValue) => number);
columnMenu?: boolean; columnMenu?: boolean;
width?: string; width?: string;
minWidth?: string; minWidth?: string;
} }
export interface DataTableNonEmptyHeader { export interface DataTableNonEmptyHeader<Row = DataTableRow> {
key: DataTableKey; key: DataTableKey<Row>;
value: DataTableValue; value: DataTableValue;
display?: (item: Value, row: DataTableRow) => DataTableValue; display?: (item: Value, row: Row) => DataTableValue;
sort?: false | ((a: DataTableValue, b: DataTableValue) => number); sort?: false | ((a: DataTableValue, b: DataTableValue) => number);
columnMenu?: boolean; columnMenu?: boolean;
width?: string; width?: string;
minWidth?: string; minWidth?: string;
} }
export type DataTableHeader = DataTableNonEmptyHeader | DataTableEmptyHeader; export type DataTableHeader<Row = DataTableRow> =
| DataTableNonEmptyHeader<Row>
| DataTableEmptyHeader<Row>;
export interface DataTableRow { export interface DataTableRow {
id: any; id: any;
@ -959,8 +961,8 @@ export interface DataTableRow {
export type DataTableRowId = any; export type DataTableRowId = any;
export interface DataTableCell { export interface DataTableCell<Row = DataTableRow> {
key: DataTableKey; key: DataTableKey<Row>;
value: DataTableValue; value: DataTableValue;
display?: (item: Value, row: DataTableRow) => 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 | | 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` | | 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 | | 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 | | 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></code> | <code>[]</code> | Specify the data table headers | | 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<DataTableRow></code> | <code>[]</code> | Specify the rows the data table should render<br />keys defined in `headers` are used for the row ids | | 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 | | 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 | | 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 | | 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 ### Slots
| Slot name | Default | Props | Fallback | | Slot name | Default | Props | Fallback |
| :----------- | :------ | :--------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------- | | :----------- | :------ | :----------------------------------------------------------------------------------------- | :----------------------------------------------------------------------- |
| -- | Yes | -- | -- | | -- | 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 | 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> | | cell-header | No | <code>{ header: DataTableNonEmptyHeader; } </code> | <code>{header.value}</code> |
| description | No | -- | <code>{description}</code> | | description | No | -- | <code>{description}</code> |
| expanded-row | No | <code>{ row: DataTableRow; } </code> | -- | | expanded-row | No | <code>{ row: Row; } </code> | -- |
| title | No | -- | <code>{title}</code> | | title | No | -- | <code>{title}</code> |
### Events ### Events
| Event name | Type | Detail | | Event name | Type | Detail |
| :------------------- | :--------- | :------------------------------------------------------------------------------------------------------ | | :------------------- | :--------- | :----------------------------------------------------------------------------------------------------------- |
| click | dispatched | <code>{ header?: DataTableHeader; row?: DataTableRow; cell?: DataTableCell; }</code> | | click | dispatched | <code>{ header?: DataTableHeader<Row>; row?: Row; cell?: DataTableCell<Row>; }</code> |
| click:header--expand | dispatched | <code>{ expanded: boolean; }</code> | | click:header--expand | dispatched | <code>{ expanded: boolean; }</code> |
| click:header | dispatched | <code>{ header: DataTableHeader; sortDirection?: "ascending" &#124; "descending" &#124; "none" }</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:header--select | dispatched | <code>{ indeterminate: boolean; selected: boolean; }</code> |
| click:row | dispatched | <code>DataTableRow</code> | | click:row | dispatched | <code>Row</code> |
| mouseenter:row | dispatched | <code>DataTableRow</code> | | mouseenter:row | dispatched | <code>Row</code> |
| mouseleave:row | dispatched | <code>DataTableRow</code> | | mouseleave:row | dispatched | <code>Row</code> |
| click:row--expand | dispatched | <code>{ expanded: boolean; row: DataTableRow; }</code> | | click:row--expand | dispatched | <code>{ expanded: boolean; row: Row; }</code> |
| click:row--select | dispatched | <code>{ selected: boolean; row: DataTableRow; }</code> | | click:row--select | dispatched | <code>{ selected: boolean; row: Row; }</code> |
| click:cell | dispatched | <code>DataTableCell</code> | | click:cell | dispatched | <code>DataTableCell<Row></code> |
## `DataTableSkeleton` ## `DataTableSkeleton`

259
docs/src/COMPONENT_API.json
View file

File diff suppressed because it is too large Load diff

42
types/DataTable/DataTable.svelte.d.ts vendored
View file

@ -1,33 +1,31 @@
import type { SvelteComponentTyped } from "svelte"; import type { SvelteComponentTyped } from "svelte";
import type { SvelteHTMLElements } from "svelte/elements"; import type { SvelteHTMLElements } from "svelte/elements";
export type DataTableKey = string; export type DataTableKey<Row = DataTableRow> = Exclude<keyof Row, "id">;
export type DataTableValue = any; export type DataTableValue = any;
export interface DataTableEmptyHeader<Row extends DataTableRow = DataTableRow> { export interface DataTableEmptyHeader<Row = DataTableRow> {
key: keyof Row; key: DataTableKey<Row>;
empty: boolean; empty: boolean;
display?: (item: Value, row: DataTableRow) => DataTableValue; display?: (item: Value, row: Row) => DataTableValue;
sort?: false | ((a: DataTableValue, b: DataTableValue) => number); sort?: false | ((a: DataTableValue, b: DataTableValue) => number);
columnMenu?: boolean; columnMenu?: boolean;
width?: string; width?: string;
minWidth?: string; minWidth?: string;
} }
export interface DataTableNonEmptyHeader< export interface DataTableNonEmptyHeader<Row = DataTableRow> {
Row extends DataTableRow = DataTableRow key: DataTableKey<Row>;
> {
key: keyof Row;
value: DataTableValue; value: DataTableValue;
display?: (item: Value, row: DataTableRow) => DataTableValue; display?: (item: Value, row: Row) => DataTableValue;
sort?: false | ((a: DataTableValue, b: DataTableValue) => number); sort?: false | ((a: DataTableValue, b: DataTableValue) => number);
columnMenu?: boolean; columnMenu?: boolean;
width?: string; width?: string;
minWidth?: string; minWidth?: string;
} }
export type DataTableHeader<Row extends DataTableRow = DataTableRow> = export type DataTableHeader<Row = DataTableRow> =
| DataTableNonEmptyHeader<Row> | DataTableNonEmptyHeader<Row>
| DataTableEmptyHeader<Row>; | DataTableEmptyHeader<Row>;
@ -38,15 +36,15 @@ export interface DataTableRow {
export type DataTableRowId = any; export type DataTableRowId = any;
export interface DataTableCell<Row extends DataTableRow = DataTableRow> { export interface DataTableCell<Row = DataTableRow> {
key: keyof Row; key: DataTableKey<Row>;
value: DataTableValue; value: DataTableValue;
display?: (item: Value, row: DataTableRow) => DataTableValue; display?: (item: Value, row: DataTableRow) => DataTableValue;
} }
type RestProps = SvelteHTMLElements["div"]; type RestProps = SvelteHTMLElements["div"];
export interface DataTableProps extends RestProps { export interface DataTableProps<Row> extends RestProps {
/** /**
* Specify the data table headers * Specify the data table headers
* @default [] * @default []
@ -94,7 +92,7 @@ export interface DataTableProps extends RestProps {
* Specify the header key to sort by * Specify the header key to sort by
* @default null * @default null
*/ */
sortKey?: DataTableKey; sortKey?: DataTableKey<Row>;
/** /**
* Specify the sort direction * Specify the sort direction
@ -207,21 +205,15 @@ export default class DataTable<
["click:row"]: CustomEvent<Row>; ["click:row"]: CustomEvent<Row>;
["mouseenter:row"]: CustomEvent<Row>; ["mouseenter:row"]: CustomEvent<Row>;
["mouseleave:row"]: CustomEvent<Row>; ["mouseleave:row"]: CustomEvent<Row>;
["click:row--expand"]: CustomEvent<{ ["click:row--expand"]: CustomEvent<{ expanded: boolean; row: Row }>;
expanded: boolean; ["click:row--select"]: CustomEvent<{ selected: boolean; row: Row }>;
row: Row; ["click:cell"]: CustomEvent<DataTableCell<Row>>;
}>;
["click:row--select"]: CustomEvent<{
selected: boolean;
row: Row;
}>;
["click:cell"]: CustomEvent<DataTableCell>;
}, },
{ {
default: {}; default: {};
cell: { cell: {
row: DataTableRow; row: Row;
cell: DataTableCell; cell: DataTableCell<Row>;
rowIndex: number; rowIndex: number;
cellIndex: number; cellIndex: number;
}; };