@workday/canvas-kit-docs 12.4.5 → 12.5.0-1036-next.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -3,13 +3,14 @@ import Basic from './examples/Basic';
|
|
|
3
3
|
import BasicWithHeading from './examples/BasicWithHeading';
|
|
4
4
|
import FixedColumn from './examples/FixedColumn';
|
|
5
5
|
import RightToLeft from './examples/RightToLeft';
|
|
6
|
+
import BaseHtmlTable from './examples/BaseHtmlTable'
|
|
6
7
|
|
|
7
8
|
# Canvas Kit Table
|
|
8
9
|
|
|
9
10
|
`Table` is a simple styled compound component that renders a
|
|
10
11
|
[table](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table) element. It is used to
|
|
11
12
|
present information in a two-dimensional table comprised of rows and columns of cells containing
|
|
12
|
-
data.
|
|
13
|
+
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.
|
|
13
14
|
|
|
14
15
|
## Installation
|
|
15
16
|
|
|
@@ -50,6 +51,18 @@ Users may add styles to the `Table.Header` to render a fixed column. The example
|
|
|
50
51
|
|
|
51
52
|
<ExampleCodeBlock code={FixedColumn} />
|
|
52
53
|
|
|
54
|
+
### Base Html Table Example
|
|
55
|
+
|
|
56
|
+
If a user needs a standard HTML [table](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table) with no [CSS Grid](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout) features, then they can use the `BaseTable` component.
|
|
57
|
+
|
|
58
|
+
<ExampleCodeBlock code={BaseHtmlTable} />
|
|
59
|
+
|
|
60
|
+
### Which Component Should I Use?
|
|
61
|
+
|
|
62
|
+
> If a user wants [CSS Grid](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout) features with their Table, then use the [Table](/components/containers/table/) component.
|
|
63
|
+
|
|
64
|
+
> If a user __does not__ want [CSS Grid](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout) features with their Table, then use the [BaseTable](/components/text/heading/) component.
|
|
65
|
+
|
|
53
66
|
### Advanced
|
|
54
67
|
|
|
55
68
|
You can also find several advanced Table examples in our Storybook Examples section.
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
|
|
3
|
+
import {BaseTable} from '@workday/canvas-kit-react/table';
|
|
4
|
+
import {createStyles} from '@workday/canvas-kit-styling';
|
|
5
|
+
import {system} from '@workday/canvas-tokens-web';
|
|
6
|
+
|
|
7
|
+
const tableHeaderStyles = createStyles({
|
|
8
|
+
backgroundColor: system.color.bg.alt.softer,
|
|
9
|
+
});
|
|
10
|
+
|
|
11
|
+
export default () => {
|
|
12
|
+
return (
|
|
13
|
+
<BaseTable>
|
|
14
|
+
<BaseTable.Caption>Coffee Drinks and Sizes</BaseTable.Caption>
|
|
15
|
+
<BaseTable.Head>
|
|
16
|
+
<BaseTable.Row>
|
|
17
|
+
<BaseTable.Header scope="col" cs={tableHeaderStyles}>
|
|
18
|
+
Drink
|
|
19
|
+
</BaseTable.Header>
|
|
20
|
+
<BaseTable.Header scope="col" cs={tableHeaderStyles}>
|
|
21
|
+
Size
|
|
22
|
+
</BaseTable.Header>
|
|
23
|
+
</BaseTable.Row>
|
|
24
|
+
</BaseTable.Head>
|
|
25
|
+
<BaseTable.Body>
|
|
26
|
+
<BaseTable.Row>
|
|
27
|
+
<BaseTable.Cell>Espresso</BaseTable.Cell>
|
|
28
|
+
<BaseTable.Cell>1 oz</BaseTable.Cell>
|
|
29
|
+
</BaseTable.Row>
|
|
30
|
+
<BaseTable.Row>
|
|
31
|
+
<BaseTable.Cell>Macchiato</BaseTable.Cell>
|
|
32
|
+
<BaseTable.Cell>2 oz Espresso</BaseTable.Cell>
|
|
33
|
+
</BaseTable.Row>
|
|
34
|
+
<BaseTable.Row>
|
|
35
|
+
<BaseTable.Cell>Cortado</BaseTable.Cell>
|
|
36
|
+
<BaseTable.Cell>2 oz Espresso, 1 oz Foamed Milk</BaseTable.Cell>
|
|
37
|
+
</BaseTable.Row>
|
|
38
|
+
<BaseTable.Row></BaseTable.Row>
|
|
39
|
+
<BaseTable.Row>
|
|
40
|
+
<BaseTable.Cell>Cappuccino</BaseTable.Cell>
|
|
41
|
+
<BaseTable.Cell>2 oz Espresso, 2 oz Foamed Milk, 2 oz Steamed Milk</BaseTable.Cell>
|
|
42
|
+
</BaseTable.Row>
|
|
43
|
+
</BaseTable.Body>
|
|
44
|
+
</BaseTable>
|
|
45
|
+
);
|
|
46
|
+
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@workday/canvas-kit-docs",
|
|
3
|
-
"version": "12.
|
|
3
|
+
"version": "12.5.0-1036-next.0",
|
|
4
4
|
"description": "Documentation components of Canvas Kit components",
|
|
5
5
|
"author": "Workday, Inc. (https://www.workday.com)",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -44,10 +44,10 @@
|
|
|
44
44
|
"dependencies": {
|
|
45
45
|
"@emotion/styled": "^11.6.0",
|
|
46
46
|
"@storybook/csf": "0.0.1",
|
|
47
|
-
"@workday/canvas-kit-labs-react": "^12.
|
|
48
|
-
"@workday/canvas-kit-preview-react": "^12.
|
|
49
|
-
"@workday/canvas-kit-react": "^12.
|
|
50
|
-
"@workday/canvas-kit-styling": "^12.
|
|
47
|
+
"@workday/canvas-kit-labs-react": "^12.5.0-1036-next.0",
|
|
48
|
+
"@workday/canvas-kit-preview-react": "^12.5.0-1036-next.0",
|
|
49
|
+
"@workday/canvas-kit-react": "^12.5.0-1036-next.0",
|
|
50
|
+
"@workday/canvas-kit-styling": "^12.5.0-1036-next.0",
|
|
51
51
|
"@workday/canvas-system-icons-web": "^3.0.0",
|
|
52
52
|
"@workday/canvas-tokens-web": "^2.1.1",
|
|
53
53
|
"markdown-to-jsx": "^7.2.0",
|
|
@@ -60,5 +60,5 @@
|
|
|
60
60
|
"mkdirp": "^1.0.3",
|
|
61
61
|
"typescript": "5.0"
|
|
62
62
|
},
|
|
63
|
-
"gitHead": "
|
|
63
|
+
"gitHead": "a5234175dda6f9880db26f3c28a11b16682b9c2c"
|
|
64
64
|
}
|