UNPKG

@workday/canvas-kit-react

Version:

The parent module that contains all Workday Canvas Kit React components

224 lines (216 loc) • 11.1 kB
import { GridProps } from '@workday/canvas-kit-react/layout'; export interface TableProps extends GridProps { } export declare const tableStencil: import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{}, {}, never>, {}, {}, import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{}, {}, never>, {}, {}, never, never>, never>; export declare const tableBodyStencil: import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{}, {}, never>, {}, {}, import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{}, {}, never>, {}, {}, never, never>, never>; export declare const tableCaptionStencil: import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{}, {}, never>, {}, {}, import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{}, {}, never>, {}, {}, never, never>, never>; export declare const tableCellStencil: import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{}, {}, never>, {}, {}, import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{}, {}, never>, {}, {}, never, never>, never>; export declare const tableFooterStencil: import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{}, {}, never>, {}, {}, never, never>; export declare const tableHeadStencil: import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{}, {}, never>, {}, {}, import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{}, {}, never>, {}, {}, never, never>, never>; export declare const tableHeaderStencil: import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{}, {}, never>, {}, {}, import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{}, {}, never>, {}, {}, never, never>, never>; export declare const TableBody: import("@workday/canvas-kit-react/common").ElementComponent<"tbody", Omit<import("@workday/canvas-kit-react/layout").BoxProps, "display"> & import("@workday/canvas-kit-react/layout").GridStyleProps>; export declare const TableCaption: import("@workday/canvas-kit-react/common").ElementComponent<"caption", Omit<import("@workday/canvas-kit-react/layout").BoxProps, "display"> & import("@workday/canvas-kit-react/layout").FlexStyleProps>; export declare const TableCell: import("@workday/canvas-kit-react/common").ElementComponent<"td", Omit<import("@workday/canvas-kit-react/layout").BoxProps, "display"> & import("@workday/canvas-kit-react/layout").GridStyleProps>; export declare const TableFooter: import("@workday/canvas-kit-react/common").ElementComponent<"tfoot", Omit<import("@workday/canvas-kit-react/layout").BoxProps, "display"> & import("@workday/canvas-kit-react/layout").GridStyleProps>; export declare const TableHead: import("@workday/canvas-kit-react/common").ElementComponent<"thead", Omit<import("@workday/canvas-kit-react/layout").BoxProps, "display"> & import("@workday/canvas-kit-react/layout").GridStyleProps>; export declare const TableHeader: import("@workday/canvas-kit-react/common").ElementComponent<"th", Omit<import("@workday/canvas-kit-react/layout").BoxProps, "display"> & import("@workday/canvas-kit-react/layout").GridStyleProps>; /** * `Table` is a simple styled compound component that renders a [table](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table) element. It is used to present information in a two-dimensional table comprised of rows and columns of cells containing data. * `Table` is built off of `BaseTable` and is using [CSS Grid](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout) features. * * * ```tsx import {Table} from '@workday/canvas-kit-react/table'; export default function App() { return ( <Table> <Table.Caption>Table Caption</Table.Caption> <Table.Head> <Table.Row> <Table.Header>Table Header</Table.Header> <Table.Header>Table Header</Table.Header> </Table.Row> </Table.Head> <Table.Body> <Table.Row> <Table.Header>Table Header</Table.Header> <Table.Header>Table Header</Table.Header> </Table.Row> <Table.Row> <Table.Header>Table Header</Table.Header> <Table.Cell>Table Data Cell</Table.Cell> </Table.Row> <Table.Row> <Table.Header>Table Header</Table.Header> <Table.Cell>Table Data Cell</Table.Cell> </Table.Row> </Table.Body> <Table.Footer> <Table.Row> <Table.Header>Table Header</Table.Header> <Table.Cell>Table Data Cell</Table.Cell> </Table.Row> </Table.Footer> </Table> ); } ``` */ export declare const Table: import("@workday/canvas-kit-react/common").ElementComponent<"table", TableProps> & { /** * `Table.Caption` renders a [caption](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/caption) element. * * * ```tsx import {Table} from '@workday/canvas-kit-react/table'; export default function App() { return ( <Table> <Table.Caption>Table Caption</Table.Caption> <Table.Body> <Table.Row> <Table.Header>Table Header</Table.Header> <Table.Cell>Table Cell</Table.Cell> </Table.Row> </Table.Body> </Table> ); } ``` */ Caption: import("@workday/canvas-kit-react/common").ElementComponent<"caption", Omit<import("@workday/canvas-kit-react/layout").BoxProps, "display"> & import("@workday/canvas-kit-react/layout").FlexStyleProps>; /** * `Table.Head` renders a [thead](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/thead) element. * * * ```tsx import {Table} from '@workday/canvas-kit-react/table'; export default function App() { return ( <Table> <Table.Head> <Table.Row> <Table.Header>Table Header</Table.Header> <Table.Cell>Table Cell</Table.Cell> </Table.Row> </Table.Head> </Table> ); } ``` */ Head: import("@workday/canvas-kit-react/common").ElementComponent<"thead", Omit<import("@workday/canvas-kit-react/layout").BoxProps, "display"> & import("@workday/canvas-kit-react/layout").GridStyleProps>; /** * `Table.Body` renders a [tbody](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tbody) element. * * * ```tsx import {Table} from '@workday/canvas-kit-react/table'; export default function App() { return ( <Table> <Table.Body> <Table.Row> <Table.Header>Table Header</Table.Header> <Table.Cell>Table Cell</Table.Cell> </Table.Row> </Table.Body> </Table> ); } ``` */ Body: import("@workday/canvas-kit-react/common").ElementComponent<"tbody", Omit<import("@workday/canvas-kit-react/layout").BoxProps, "display"> & import("@workday/canvas-kit-react/layout").GridStyleProps>; /** * `Table.Row` renders a [tr](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tr) element. * * **Note**: `Table.Row` is built on [Grid](/docs/components-layout-grid--basic). It will look for * how many children are there and if those children are valid React Elements. This will adjust the * amount of columns automatically using the `gridTemplateColumns` style prop and the width of the * columns is also set using a `minmax` function in the `gridTemplateColumns` style prop. If a user * would like to adjust this, it can be overwritten on `Table.Row`. See the example below for how to * overwrite `gridTemplateColumns`. * * * ```tsx import {Table} from '@workday/canvas-kit-react/table'; export default function App() { return ( <Table> <Table.Head> <Table.Row gridTemplateColumns="repeat(4, minmax(100px, 1fr))"> <Table.Header>Table Header</Table.Header> <Table.Cell>Table Cell</Table.Cell> </Table.Row> </Table.Head> </Table> ); } ``` */ Row: import("@workday/canvas-kit-react/common").ElementComponent<"tr", Omit<import("@workday/canvas-kit-react/layout").BoxProps, "display"> & import("@workday/canvas-kit-react/layout").GridStyleProps>; /** * `Table.Header` renders a [th](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th) element. * * * ```tsx import {Table} from '@workday/canvas-kit-react/table'; export default function App() { return ( <Table> <Table.Head> <Table.Row> <Table.Header>Table Header</Table.Header> <Table.Cell>Table Cell</Table.Cell> </Table.Row> </Table.Head> </Table> ); } ``` */ Header: import("@workday/canvas-kit-react/common").ElementComponent<"th", Omit<import("@workday/canvas-kit-react/layout").BoxProps, "display"> & import("@workday/canvas-kit-react/layout").GridStyleProps>; /** * `Table.Cell` renders a [td](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/td) element. * * * ```tsx import {Table} from '@workday/canvas-kit-react/table'; export default function App() { return ( <Table> <Table.Body> <Table.Row> <Table.Header>Table Header</Table.Header> <Table.Cell>Table Cell</Table.Cell> </Table.Row> </Table.Body> </Table> ); } ``` */ Cell: import("@workday/canvas-kit-react/common").ElementComponent<"td", Omit<import("@workday/canvas-kit-react/layout").BoxProps, "display"> & import("@workday/canvas-kit-react/layout").GridStyleProps>; /** * `Table.Footer` renders a [tfoot](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tfoot) element. * * * ```tsx import {Table} from '@workday/canvas-kit-react/table'; export default function App() { return ( <Table> <Table.Footer> <Table.Row> <Table.Header>Table Header</Table.Header> <Table.Cell>Table Cell</Table.Cell> </Table.Row> </Table.Footer> </Table> ); } ``` */ Footer: import("@workday/canvas-kit-react/common").ElementComponent<"tfoot", Omit<import("@workday/canvas-kit-react/layout").BoxProps, "display"> & import("@workday/canvas-kit-react/layout").GridStyleProps>; }; //# sourceMappingURL=Table.d.ts.map