@workday/canvas-kit-preview-react 9.0.0-alpha.382-next.2 → 9.0.0-alpha.385-next.4
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.
- package/dist/commonjs/table/index.d.ts +2 -0
- package/dist/commonjs/table/index.d.ts.map +1 -0
- package/dist/commonjs/table/index.js +13 -0
- package/dist/commonjs/table/lib/Table.d.ts +207 -0
- package/dist/commonjs/table/lib/Table.d.ts.map +1 -0
- package/dist/commonjs/table/lib/Table.js +229 -0
- package/dist/commonjs/table/lib/TableBody.d.ts +2 -0
- package/dist/commonjs/table/lib/TableBody.d.ts.map +1 -0
- package/dist/commonjs/table/lib/TableBody.js +35 -0
- package/dist/commonjs/table/lib/TableCaption.d.ts +2 -0
- package/dist/commonjs/table/lib/TableCaption.d.ts.map +1 -0
- package/dist/commonjs/table/lib/TableCaption.js +16 -0
- package/dist/commonjs/table/lib/TableCell.d.ts +2 -0
- package/dist/commonjs/table/lib/TableCell.d.ts.map +1 -0
- package/dist/commonjs/table/lib/TableCell.js +16 -0
- package/dist/commonjs/table/lib/TableFooter.d.ts +2 -0
- package/dist/commonjs/table/lib/TableFooter.d.ts.map +1 -0
- package/dist/commonjs/table/lib/TableFooter.js +15 -0
- package/dist/commonjs/table/lib/TableHead.d.ts +2 -0
- package/dist/commonjs/table/lib/TableHead.d.ts.map +1 -0
- package/dist/commonjs/table/lib/TableHead.js +23 -0
- package/dist/commonjs/table/lib/TableHeader.d.ts +2 -0
- package/dist/commonjs/table/lib/TableHeader.d.ts.map +1 -0
- package/dist/commonjs/table/lib/TableHeader.js +16 -0
- package/dist/commonjs/table/lib/TableRow.d.ts +2 -0
- package/dist/commonjs/table/lib/TableRow.d.ts.map +1 -0
- package/dist/commonjs/table/lib/TableRow.js +19 -0
- package/dist/es6/table/index.d.ts +2 -0
- package/dist/es6/table/index.d.ts.map +1 -0
- package/dist/es6/table/index.js +1 -0
- package/dist/es6/table/lib/Table.d.ts +207 -0
- package/dist/es6/table/lib/Table.d.ts.map +1 -0
- package/dist/es6/table/lib/Table.js +223 -0
- package/dist/es6/table/lib/TableBody.d.ts +2 -0
- package/dist/es6/table/lib/TableBody.d.ts.map +1 -0
- package/dist/es6/table/lib/TableBody.js +29 -0
- package/dist/es6/table/lib/TableCaption.d.ts +2 -0
- package/dist/es6/table/lib/TableCaption.d.ts.map +1 -0
- package/dist/es6/table/lib/TableCaption.js +10 -0
- package/dist/es6/table/lib/TableCell.d.ts +2 -0
- package/dist/es6/table/lib/TableCell.d.ts.map +1 -0
- package/dist/es6/table/lib/TableCell.js +10 -0
- package/dist/es6/table/lib/TableFooter.d.ts +2 -0
- package/dist/es6/table/lib/TableFooter.d.ts.map +1 -0
- package/dist/es6/table/lib/TableFooter.js +9 -0
- package/dist/es6/table/lib/TableHead.d.ts +2 -0
- package/dist/es6/table/lib/TableHead.d.ts.map +1 -0
- package/dist/es6/table/lib/TableHead.js +17 -0
- package/dist/es6/table/lib/TableHeader.d.ts +2 -0
- package/dist/es6/table/lib/TableHeader.d.ts.map +1 -0
- package/dist/es6/table/lib/TableHeader.js +10 -0
- package/dist/es6/table/lib/TableRow.d.ts +2 -0
- package/dist/es6/table/lib/TableRow.d.ts.map +1 -0
- package/dist/es6/table/lib/TableRow.js +13 -0
- package/package.json +3 -3
- package/table/LICENSE +51 -0
- package/table/README.md +5 -0
- package/table/index.ts +1 -0
- package/table/lib/Table.tsx +236 -0
- package/table/lib/TableBody.tsx +35 -0
- package/table/lib/TableCaption.tsx +22 -0
- package/table/lib/TableCell.tsx +27 -0
- package/table/lib/TableFooter.tsx +14 -0
- package/table/lib/TableHead.tsx +23 -0
- package/table/lib/TableHeader.tsx +28 -0
- package/table/lib/TableRow.tsx +26 -0
- package/table/package.json +6 -0
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../table/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC"}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
|
|
5
|
+
}) : (function(o, m, k, k2) {
|
|
6
|
+
if (k2 === undefined) k2 = k;
|
|
7
|
+
o[k2] = m[k];
|
|
8
|
+
}));
|
|
9
|
+
var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
10
|
+
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
|
|
11
|
+
};
|
|
12
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
13
|
+
__exportStar(require("./lib/Table"), exports);
|
|
@@ -0,0 +1,207 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* `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.
|
|
3
|
+
*
|
|
4
|
+
*
|
|
5
|
+
* ```tsx
|
|
6
|
+
import {Table} from '@workday/canvas-kit-preview-react/table';
|
|
7
|
+
|
|
8
|
+
export default function App() {
|
|
9
|
+
return (
|
|
10
|
+
<Table>
|
|
11
|
+
<Table.Caption>Table Caption</Table.Caption>
|
|
12
|
+
<Table.Head>
|
|
13
|
+
<Table.Row>
|
|
14
|
+
<Table.Header>Table Header</Table.Header>
|
|
15
|
+
<Table.Header>Table Header</Table.Header>
|
|
16
|
+
</Table.Row>
|
|
17
|
+
</Table.Head>
|
|
18
|
+
<Table.Body>
|
|
19
|
+
<Table.Row>
|
|
20
|
+
<Table.Header>Table Header</Table.Header>
|
|
21
|
+
<Table.Header>Table Header</Table.Header>
|
|
22
|
+
</Table.Row>
|
|
23
|
+
<Table.Row>
|
|
24
|
+
<Table.Header>Table Header</Table.Header>
|
|
25
|
+
<Table.Cell>Table Data Cell</Table.Cell>
|
|
26
|
+
</Table.Row>
|
|
27
|
+
<Table.Row>
|
|
28
|
+
<Table.Header>Table Header</Table.Header>
|
|
29
|
+
<Table.Cell>Table Data Cell</Table.Cell>
|
|
30
|
+
</Table.Row>
|
|
31
|
+
</Table.Body>
|
|
32
|
+
<Table.Footer>
|
|
33
|
+
<Table.Row>
|
|
34
|
+
<Table.Header>Table Header</Table.Header>
|
|
35
|
+
<Table.Cell>Table Data Cell</Table.Cell>
|
|
36
|
+
</Table.Row>
|
|
37
|
+
</Table.Footer>
|
|
38
|
+
</Table>
|
|
39
|
+
);
|
|
40
|
+
}
|
|
41
|
+
```
|
|
42
|
+
*/
|
|
43
|
+
export declare const Table: import("@workday/canvas-kit-react/common").ElementComponent<"table", Omit<import("@workday/canvas-kit-react/layout").BoxProps, "display"> & import("@workday/canvas-kit-react/layout").GridStyleProps> & {
|
|
44
|
+
/**
|
|
45
|
+
* `Table.Caption` renders a [caption](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/caption) element.
|
|
46
|
+
*
|
|
47
|
+
*
|
|
48
|
+
* ```tsx
|
|
49
|
+
import {Table} from '@workday/canvas-kit-preview-react/table';
|
|
50
|
+
|
|
51
|
+
export default function App() {
|
|
52
|
+
return (
|
|
53
|
+
<Table>
|
|
54
|
+
<Table.Caption>Table Caption</Table.Caption>
|
|
55
|
+
<Table.Body>
|
|
56
|
+
<Table.Row>
|
|
57
|
+
<Table.Header>Table Header</Table.Header>
|
|
58
|
+
<Table.Cell>Table Cell</Table.Cell>
|
|
59
|
+
</Table.Row>
|
|
60
|
+
</Table.Body>
|
|
61
|
+
</Table>
|
|
62
|
+
);
|
|
63
|
+
}
|
|
64
|
+
```
|
|
65
|
+
*/
|
|
66
|
+
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>;
|
|
67
|
+
/**
|
|
68
|
+
* `Table.Head` renders a [thead](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/thead) element.
|
|
69
|
+
*
|
|
70
|
+
*
|
|
71
|
+
* ```tsx
|
|
72
|
+
import {Table} from '@workday/canvas-kit-preview-react/table';
|
|
73
|
+
|
|
74
|
+
export default function App() {
|
|
75
|
+
return (
|
|
76
|
+
<Table>
|
|
77
|
+
<Table.Head>
|
|
78
|
+
<Table.Row>
|
|
79
|
+
<Table.Header>Table Header</Table.Header>
|
|
80
|
+
<Table.Cell>Table Cell</Table.Cell>
|
|
81
|
+
</Table.Row>
|
|
82
|
+
</Table.Head>
|
|
83
|
+
</Table>
|
|
84
|
+
);
|
|
85
|
+
}
|
|
86
|
+
```
|
|
87
|
+
*/
|
|
88
|
+
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>;
|
|
89
|
+
/**
|
|
90
|
+
* `Table.Body` renders a [tbody](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tbody) element.
|
|
91
|
+
*
|
|
92
|
+
*
|
|
93
|
+
* ```tsx
|
|
94
|
+
import {Table} from '@workday/canvas-kit-preview-react/table';
|
|
95
|
+
|
|
96
|
+
export default function App() {
|
|
97
|
+
return (
|
|
98
|
+
<Table>
|
|
99
|
+
<Table.Body>
|
|
100
|
+
<Table.Row>
|
|
101
|
+
<Table.Header>Table Header</Table.Header>
|
|
102
|
+
<Table.Cell>Table Cell</Table.Cell>
|
|
103
|
+
</Table.Row>
|
|
104
|
+
</Table.Body>
|
|
105
|
+
</Table>
|
|
106
|
+
);
|
|
107
|
+
}
|
|
108
|
+
```
|
|
109
|
+
*/
|
|
110
|
+
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>;
|
|
111
|
+
/**
|
|
112
|
+
* `Table.Row` renders a [tr](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tr) element.
|
|
113
|
+
*
|
|
114
|
+
* **Note**: `Table.Row` is built on [Grid](/docs/components-layout-grid--basic). It will look for
|
|
115
|
+
* how many children are there and if those children are valid React Elements. This will adjust the
|
|
116
|
+
* amount of columns automatically using the `gridTemplateColumns` style prop and the width of the
|
|
117
|
+
* columns is also set using a `minmax` function in the `gridTemplateColumns` style prop. If a user
|
|
118
|
+
* would like to adjust this, it can be overwritten on `Table.Row`. See the example below for how to
|
|
119
|
+
* overwrite `gridTemplateColumns`.
|
|
120
|
+
*
|
|
121
|
+
*
|
|
122
|
+
* ```tsx
|
|
123
|
+
import {Table} from '@workday/canvas-kit-preview-react/table';
|
|
124
|
+
|
|
125
|
+
export default function App() {
|
|
126
|
+
return (
|
|
127
|
+
<Table>
|
|
128
|
+
<Table.Head>
|
|
129
|
+
<Table.Row gridTemplateColumns="repeat(4, minmax(100px, 1fr))">
|
|
130
|
+
<Table.Header>Table Header</Table.Header>
|
|
131
|
+
<Table.Cell>Table Cell</Table.Cell>
|
|
132
|
+
</Table.Row>
|
|
133
|
+
</Table.Head>
|
|
134
|
+
</Table>
|
|
135
|
+
);
|
|
136
|
+
}
|
|
137
|
+
```
|
|
138
|
+
*/
|
|
139
|
+
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>;
|
|
140
|
+
/**
|
|
141
|
+
* `Table.Header` renders a [th](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th) element.
|
|
142
|
+
*
|
|
143
|
+
*
|
|
144
|
+
* ```tsx
|
|
145
|
+
import {Table} from '@workday/canvas-kit-preview-react/table';
|
|
146
|
+
|
|
147
|
+
export default function App() {
|
|
148
|
+
return (
|
|
149
|
+
<Table>
|
|
150
|
+
<Table.Head>
|
|
151
|
+
<Table.Row>
|
|
152
|
+
<Table.Header>Table Header</Table.Header>
|
|
153
|
+
<Table.Cell>Table Cell</Table.Cell>
|
|
154
|
+
</Table.Row>
|
|
155
|
+
</Table.Head>
|
|
156
|
+
</Table>
|
|
157
|
+
);
|
|
158
|
+
}
|
|
159
|
+
```
|
|
160
|
+
*/
|
|
161
|
+
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>;
|
|
162
|
+
/**
|
|
163
|
+
* `Table.Cell` renders a [td](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/td) element.
|
|
164
|
+
*
|
|
165
|
+
*
|
|
166
|
+
* ```tsx
|
|
167
|
+
import {Table} from '@workday/canvas-kit-preview-react/table';
|
|
168
|
+
|
|
169
|
+
export default function App() {
|
|
170
|
+
return (
|
|
171
|
+
<Table>
|
|
172
|
+
<Table.Body>
|
|
173
|
+
<Table.Row>
|
|
174
|
+
<Table.Header>Table Header</Table.Header>
|
|
175
|
+
<Table.Cell>Table Cell</Table.Cell>
|
|
176
|
+
</Table.Row>
|
|
177
|
+
</Table.Body>
|
|
178
|
+
</Table>
|
|
179
|
+
);
|
|
180
|
+
}
|
|
181
|
+
```
|
|
182
|
+
*/
|
|
183
|
+
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>;
|
|
184
|
+
/**
|
|
185
|
+
* `Table.Footer` renders a [tfoot](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tfoot) element.
|
|
186
|
+
*
|
|
187
|
+
*
|
|
188
|
+
* ```tsx
|
|
189
|
+
import {Table} from '@workday/canvas-kit-preview-react/table';
|
|
190
|
+
|
|
191
|
+
export default function App() {
|
|
192
|
+
return (
|
|
193
|
+
<Table>
|
|
194
|
+
<Table.Footer>
|
|
195
|
+
<Table.Row>
|
|
196
|
+
<Table.Header>Table Header</Table.Header>
|
|
197
|
+
<Table.Cell>Table Cell</Table.Cell>
|
|
198
|
+
</Table.Row>
|
|
199
|
+
</Table.Footer>
|
|
200
|
+
</Table>
|
|
201
|
+
);
|
|
202
|
+
}
|
|
203
|
+
```
|
|
204
|
+
*/
|
|
205
|
+
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>;
|
|
206
|
+
};
|
|
207
|
+
//# sourceMappingURL=Table.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../../table/lib/Table.tsx"],"names":[],"mappings":"AAYA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyCG;AACH,eAAO,MAAM,KAAK;IAkBd;;;;;;;;;;;;;;;;;;;;;MAqBE;;IAEF;;;;;;;;;;;;;;;;;;;;MAoBE;;IAEF;;;;;;;;;;;;;;;;;;;;MAoBE;;IAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;MA2BE;;IAEF;;;;;;;;;;;;;;;;;;;;MAoBE;;IAEF;;;;;;;;;;;;;;;;;;;;MAoBE;;IAEF;;;;;;;;;;;;;;;;;;;;MAoBE;;CAGJ,CAAC"}
|
|
@@ -0,0 +1,229 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
exports.Table = void 0;
|
|
7
|
+
const react_1 = __importDefault(require("react"));
|
|
8
|
+
const layout_1 = require("@workday/canvas-kit-react/layout");
|
|
9
|
+
const tokens_1 = require("@workday/canvas-kit-react/tokens");
|
|
10
|
+
const common_1 = require("@workday/canvas-kit-react/common");
|
|
11
|
+
const TableHead_1 = require("./TableHead");
|
|
12
|
+
const TableBody_1 = require("./TableBody");
|
|
13
|
+
const TableRow_1 = require("./TableRow");
|
|
14
|
+
const TableHeader_1 = require("./TableHeader");
|
|
15
|
+
const TableCell_1 = require("./TableCell");
|
|
16
|
+
const TableFooter_1 = require("./TableFooter");
|
|
17
|
+
const TableCaption_1 = require("./TableCaption");
|
|
18
|
+
/**
|
|
19
|
+
* `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.
|
|
20
|
+
*
|
|
21
|
+
*
|
|
22
|
+
* ```tsx
|
|
23
|
+
import {Table} from '@workday/canvas-kit-preview-react/table';
|
|
24
|
+
|
|
25
|
+
export default function App() {
|
|
26
|
+
return (
|
|
27
|
+
<Table>
|
|
28
|
+
<Table.Caption>Table Caption</Table.Caption>
|
|
29
|
+
<Table.Head>
|
|
30
|
+
<Table.Row>
|
|
31
|
+
<Table.Header>Table Header</Table.Header>
|
|
32
|
+
<Table.Header>Table Header</Table.Header>
|
|
33
|
+
</Table.Row>
|
|
34
|
+
</Table.Head>
|
|
35
|
+
<Table.Body>
|
|
36
|
+
<Table.Row>
|
|
37
|
+
<Table.Header>Table Header</Table.Header>
|
|
38
|
+
<Table.Header>Table Header</Table.Header>
|
|
39
|
+
</Table.Row>
|
|
40
|
+
<Table.Row>
|
|
41
|
+
<Table.Header>Table Header</Table.Header>
|
|
42
|
+
<Table.Cell>Table Data Cell</Table.Cell>
|
|
43
|
+
</Table.Row>
|
|
44
|
+
<Table.Row>
|
|
45
|
+
<Table.Header>Table Header</Table.Header>
|
|
46
|
+
<Table.Cell>Table Data Cell</Table.Cell>
|
|
47
|
+
</Table.Row>
|
|
48
|
+
</Table.Body>
|
|
49
|
+
<Table.Footer>
|
|
50
|
+
<Table.Row>
|
|
51
|
+
<Table.Header>Table Header</Table.Header>
|
|
52
|
+
<Table.Cell>Table Data Cell</Table.Cell>
|
|
53
|
+
</Table.Row>
|
|
54
|
+
</Table.Footer>
|
|
55
|
+
</Table>
|
|
56
|
+
);
|
|
57
|
+
}
|
|
58
|
+
```
|
|
59
|
+
*/
|
|
60
|
+
exports.Table = common_1.createComponent('table')({
|
|
61
|
+
displayName: 'Table',
|
|
62
|
+
Component: ({ children, ...elemProps }, ref, Element) => {
|
|
63
|
+
return (react_1.default.createElement(layout_1.Grid, Object.assign({ as: Element, ref: ref, border: `1px solid ${tokens_1.colors.soap500}`, borderRadius: "l", overflow: "scroll" }, tokens_1.type.levels.subtext.large, elemProps), children));
|
|
64
|
+
},
|
|
65
|
+
subComponents: {
|
|
66
|
+
/**
|
|
67
|
+
* `Table.Caption` renders a [caption](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/caption) element.
|
|
68
|
+
*
|
|
69
|
+
*
|
|
70
|
+
* ```tsx
|
|
71
|
+
import {Table} from '@workday/canvas-kit-preview-react/table';
|
|
72
|
+
|
|
73
|
+
export default function App() {
|
|
74
|
+
return (
|
|
75
|
+
<Table>
|
|
76
|
+
<Table.Caption>Table Caption</Table.Caption>
|
|
77
|
+
<Table.Body>
|
|
78
|
+
<Table.Row>
|
|
79
|
+
<Table.Header>Table Header</Table.Header>
|
|
80
|
+
<Table.Cell>Table Cell</Table.Cell>
|
|
81
|
+
</Table.Row>
|
|
82
|
+
</Table.Body>
|
|
83
|
+
</Table>
|
|
84
|
+
);
|
|
85
|
+
}
|
|
86
|
+
```
|
|
87
|
+
*/
|
|
88
|
+
Caption: TableCaption_1.TableCaption,
|
|
89
|
+
/**
|
|
90
|
+
* `Table.Head` renders a [thead](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/thead) element.
|
|
91
|
+
*
|
|
92
|
+
*
|
|
93
|
+
* ```tsx
|
|
94
|
+
import {Table} from '@workday/canvas-kit-preview-react/table';
|
|
95
|
+
|
|
96
|
+
export default function App() {
|
|
97
|
+
return (
|
|
98
|
+
<Table>
|
|
99
|
+
<Table.Head>
|
|
100
|
+
<Table.Row>
|
|
101
|
+
<Table.Header>Table Header</Table.Header>
|
|
102
|
+
<Table.Cell>Table Cell</Table.Cell>
|
|
103
|
+
</Table.Row>
|
|
104
|
+
</Table.Head>
|
|
105
|
+
</Table>
|
|
106
|
+
);
|
|
107
|
+
}
|
|
108
|
+
```
|
|
109
|
+
*/
|
|
110
|
+
Head: TableHead_1.TableHead,
|
|
111
|
+
/**
|
|
112
|
+
* `Table.Body` renders a [tbody](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tbody) element.
|
|
113
|
+
*
|
|
114
|
+
*
|
|
115
|
+
* ```tsx
|
|
116
|
+
import {Table} from '@workday/canvas-kit-preview-react/table';
|
|
117
|
+
|
|
118
|
+
export default function App() {
|
|
119
|
+
return (
|
|
120
|
+
<Table>
|
|
121
|
+
<Table.Body>
|
|
122
|
+
<Table.Row>
|
|
123
|
+
<Table.Header>Table Header</Table.Header>
|
|
124
|
+
<Table.Cell>Table Cell</Table.Cell>
|
|
125
|
+
</Table.Row>
|
|
126
|
+
</Table.Body>
|
|
127
|
+
</Table>
|
|
128
|
+
);
|
|
129
|
+
}
|
|
130
|
+
```
|
|
131
|
+
*/
|
|
132
|
+
Body: TableBody_1.TableBody,
|
|
133
|
+
/**
|
|
134
|
+
* `Table.Row` renders a [tr](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tr) element.
|
|
135
|
+
*
|
|
136
|
+
* **Note**: `Table.Row` is built on [Grid](/docs/components-layout-grid--basic). It will look for
|
|
137
|
+
* how many children are there and if those children are valid React Elements. This will adjust the
|
|
138
|
+
* amount of columns automatically using the `gridTemplateColumns` style prop and the width of the
|
|
139
|
+
* columns is also set using a `minmax` function in the `gridTemplateColumns` style prop. If a user
|
|
140
|
+
* would like to adjust this, it can be overwritten on `Table.Row`. See the example below for how to
|
|
141
|
+
* overwrite `gridTemplateColumns`.
|
|
142
|
+
*
|
|
143
|
+
*
|
|
144
|
+
* ```tsx
|
|
145
|
+
import {Table} from '@workday/canvas-kit-preview-react/table';
|
|
146
|
+
|
|
147
|
+
export default function App() {
|
|
148
|
+
return (
|
|
149
|
+
<Table>
|
|
150
|
+
<Table.Head>
|
|
151
|
+
<Table.Row gridTemplateColumns="repeat(4, minmax(100px, 1fr))">
|
|
152
|
+
<Table.Header>Table Header</Table.Header>
|
|
153
|
+
<Table.Cell>Table Cell</Table.Cell>
|
|
154
|
+
</Table.Row>
|
|
155
|
+
</Table.Head>
|
|
156
|
+
</Table>
|
|
157
|
+
);
|
|
158
|
+
}
|
|
159
|
+
```
|
|
160
|
+
*/
|
|
161
|
+
Row: TableRow_1.TableRow,
|
|
162
|
+
/**
|
|
163
|
+
* `Table.Header` renders a [th](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th) element.
|
|
164
|
+
*
|
|
165
|
+
*
|
|
166
|
+
* ```tsx
|
|
167
|
+
import {Table} from '@workday/canvas-kit-preview-react/table';
|
|
168
|
+
|
|
169
|
+
export default function App() {
|
|
170
|
+
return (
|
|
171
|
+
<Table>
|
|
172
|
+
<Table.Head>
|
|
173
|
+
<Table.Row>
|
|
174
|
+
<Table.Header>Table Header</Table.Header>
|
|
175
|
+
<Table.Cell>Table Cell</Table.Cell>
|
|
176
|
+
</Table.Row>
|
|
177
|
+
</Table.Head>
|
|
178
|
+
</Table>
|
|
179
|
+
);
|
|
180
|
+
}
|
|
181
|
+
```
|
|
182
|
+
*/
|
|
183
|
+
Header: TableHeader_1.TableHeader,
|
|
184
|
+
/**
|
|
185
|
+
* `Table.Cell` renders a [td](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/td) element.
|
|
186
|
+
*
|
|
187
|
+
*
|
|
188
|
+
* ```tsx
|
|
189
|
+
import {Table} from '@workday/canvas-kit-preview-react/table';
|
|
190
|
+
|
|
191
|
+
export default function App() {
|
|
192
|
+
return (
|
|
193
|
+
<Table>
|
|
194
|
+
<Table.Body>
|
|
195
|
+
<Table.Row>
|
|
196
|
+
<Table.Header>Table Header</Table.Header>
|
|
197
|
+
<Table.Cell>Table Cell</Table.Cell>
|
|
198
|
+
</Table.Row>
|
|
199
|
+
</Table.Body>
|
|
200
|
+
</Table>
|
|
201
|
+
);
|
|
202
|
+
}
|
|
203
|
+
```
|
|
204
|
+
*/
|
|
205
|
+
Cell: TableCell_1.TableCell,
|
|
206
|
+
/**
|
|
207
|
+
* `Table.Footer` renders a [tfoot](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tfoot) element.
|
|
208
|
+
*
|
|
209
|
+
*
|
|
210
|
+
* ```tsx
|
|
211
|
+
import {Table} from '@workday/canvas-kit-preview-react/table';
|
|
212
|
+
|
|
213
|
+
export default function App() {
|
|
214
|
+
return (
|
|
215
|
+
<Table>
|
|
216
|
+
<Table.Footer>
|
|
217
|
+
<Table.Row>
|
|
218
|
+
<Table.Header>Table Header</Table.Header>
|
|
219
|
+
<Table.Cell>Table Cell</Table.Cell>
|
|
220
|
+
</Table.Row>
|
|
221
|
+
</Table.Footer>
|
|
222
|
+
</Table>
|
|
223
|
+
);
|
|
224
|
+
}
|
|
225
|
+
```
|
|
226
|
+
*/
|
|
227
|
+
Footer: TableFooter_1.TableFooter,
|
|
228
|
+
},
|
|
229
|
+
});
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TableBody.d.ts","sourceRoot":"","sources":["../../../../table/lib/TableBody.tsx"],"names":[],"mappings":"AAyBA,eAAO,MAAM,SAAS,wMASpB,CAAC"}
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
exports.TableBody = void 0;
|
|
7
|
+
const react_1 = __importDefault(require("react"));
|
|
8
|
+
const layout_1 = require("@workday/canvas-kit-react/layout");
|
|
9
|
+
const common_1 = require("@workday/canvas-kit-react/common");
|
|
10
|
+
const StyledBody = common_1.styled(layout_1.Grid.as('tbody'))({
|
|
11
|
+
'tr:last-of-type td': {
|
|
12
|
+
borderBottom: 'none',
|
|
13
|
+
},
|
|
14
|
+
'tr:last-of-type th': {
|
|
15
|
+
borderBottom: 'none',
|
|
16
|
+
},
|
|
17
|
+
'tr:first-of-type td': {
|
|
18
|
+
borderTop: 'none',
|
|
19
|
+
},
|
|
20
|
+
'tr:first-of-type th': {
|
|
21
|
+
borderTop: 'none',
|
|
22
|
+
},
|
|
23
|
+
'td:last-of-type': {
|
|
24
|
+
borderRight: 'none',
|
|
25
|
+
},
|
|
26
|
+
'td:first-of-type': {
|
|
27
|
+
borderLeft: 'none',
|
|
28
|
+
},
|
|
29
|
+
});
|
|
30
|
+
exports.TableBody = common_1.createComponent('tbody')({
|
|
31
|
+
displayName: 'Table.Body',
|
|
32
|
+
Component: ({ children, ...elemProps }, ref, Element) => {
|
|
33
|
+
return (react_1.default.createElement(StyledBody, Object.assign({ as: Element, ref: ref }, elemProps), children));
|
|
34
|
+
},
|
|
35
|
+
});
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
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>;
|
|
2
|
+
//# sourceMappingURL=TableCaption.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TableCaption.d.ts","sourceRoot":"","sources":["../../../../table/lib/TableCaption.tsx"],"names":[],"mappings":"AAKA,eAAO,MAAM,YAAY,0MAgBvB,CAAC"}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
exports.TableCaption = void 0;
|
|
7
|
+
const react_1 = __importDefault(require("react"));
|
|
8
|
+
const tokens_1 = require("@workday/canvas-kit-react/tokens");
|
|
9
|
+
const layout_1 = require("@workday/canvas-kit-react/layout");
|
|
10
|
+
const common_1 = require("@workday/canvas-kit-react/common");
|
|
11
|
+
exports.TableCaption = common_1.createComponent('caption')({
|
|
12
|
+
displayName: 'Table.Caption',
|
|
13
|
+
Component: ({ children, ...elemProps }, ref, Element) => {
|
|
14
|
+
return (react_1.default.createElement(layout_1.Flex, Object.assign({ as: Element, ref: ref, borderBottom: `1px solid ${tokens_1.colors.soap500}`, paddingY: "xxs", paddingX: "s" }, elemProps), children));
|
|
15
|
+
},
|
|
16
|
+
});
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TableCell.d.ts","sourceRoot":"","sources":["../../../../table/lib/TableCell.tsx"],"names":[],"mappings":"AAKA,eAAO,MAAM,SAAS,qMAqBpB,CAAC"}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
exports.TableCell = void 0;
|
|
7
|
+
const react_1 = __importDefault(require("react"));
|
|
8
|
+
const layout_1 = require("@workday/canvas-kit-react/layout");
|
|
9
|
+
const tokens_1 = require("@workday/canvas-kit-react/tokens");
|
|
10
|
+
const common_1 = require("@workday/canvas-kit-react/common");
|
|
11
|
+
exports.TableCell = common_1.createComponent('td')({
|
|
12
|
+
displayName: 'Table.Cell',
|
|
13
|
+
Component: ({ children, ...elemProps }, ref, Element) => {
|
|
14
|
+
return (react_1.default.createElement(layout_1.Grid, Object.assign({ as: Element, ref: ref, alignItems: "center", backgroundColor: "frenchVanilla100", borderBottom: `1px solid ${tokens_1.colors.soap400}`, justifyContent: "left", minHeight: "56px", paddingY: "xxs", paddingX: "s", wordBreak: "break-word" }, elemProps), children));
|
|
15
|
+
},
|
|
16
|
+
});
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TableFooter.d.ts","sourceRoot":"","sources":["../../../../table/lib/TableFooter.tsx"],"names":[],"mappings":"AAIA,eAAO,MAAM,WAAW,wMAStB,CAAC"}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
exports.TableFooter = void 0;
|
|
7
|
+
const react_1 = __importDefault(require("react"));
|
|
8
|
+
const layout_1 = require("@workday/canvas-kit-react/layout");
|
|
9
|
+
const common_1 = require("@workday/canvas-kit-react/common");
|
|
10
|
+
exports.TableFooter = common_1.createComponent('tfoot')({
|
|
11
|
+
displayName: 'Table.Footer',
|
|
12
|
+
Component: ({ children, ...elemProps }, ref, Element) => {
|
|
13
|
+
return (react_1.default.createElement(layout_1.Grid, Object.assign({ as: Element, ref: ref }, elemProps), children));
|
|
14
|
+
},
|
|
15
|
+
});
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TableHead.d.ts","sourceRoot":"","sources":["../../../../table/lib/TableHead.tsx"],"names":[],"mappings":"AAaA,eAAO,MAAM,SAAS,wMASpB,CAAC"}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
exports.TableHead = void 0;
|
|
7
|
+
const react_1 = __importDefault(require("react"));
|
|
8
|
+
const layout_1 = require("@workday/canvas-kit-react/layout");
|
|
9
|
+
const common_1 = require("@workday/canvas-kit-react/common");
|
|
10
|
+
const StyledHead = common_1.styled(layout_1.Grid.as('thead'))({
|
|
11
|
+
'th:last-of-type': {
|
|
12
|
+
borderRight: 'none',
|
|
13
|
+
},
|
|
14
|
+
'th:first-of-type': {
|
|
15
|
+
borderLeft: 'none',
|
|
16
|
+
},
|
|
17
|
+
});
|
|
18
|
+
exports.TableHead = common_1.createComponent('thead')({
|
|
19
|
+
displayName: 'Table.Head',
|
|
20
|
+
Component: ({ children, ...elemProps }, ref, Element) => {
|
|
21
|
+
return (react_1.default.createElement(StyledHead, Object.assign({ as: Element, ref: ref, backgroundColor: "soap100", minHeight: "48px" }, elemProps), children));
|
|
22
|
+
},
|
|
23
|
+
});
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TableHeader.d.ts","sourceRoot":"","sources":["../../../../table/lib/TableHeader.tsx"],"names":[],"mappings":"AAKA,eAAO,MAAM,WAAW,qMAsBtB,CAAC"}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
exports.TableHeader = void 0;
|
|
7
|
+
const react_1 = __importDefault(require("react"));
|
|
8
|
+
const layout_1 = require("@workday/canvas-kit-react/layout");
|
|
9
|
+
const tokens_1 = require("@workday/canvas-kit-react/tokens");
|
|
10
|
+
const common_1 = require("@workday/canvas-kit-react/common");
|
|
11
|
+
exports.TableHeader = common_1.createComponent('th')({
|
|
12
|
+
displayName: 'Table.Header',
|
|
13
|
+
Component: ({ children, ...elemProps }, ref, Element) => {
|
|
14
|
+
return (react_1.default.createElement(layout_1.Grid, Object.assign({ as: Element, ref: ref, alignItems: "center", backgroundColor: "frenchVanilla100", borderBottom: `1px solid ${tokens_1.colors.soap400}`, justifyContent: "left", minHeight: "56px", paddingY: "xxs", paddingX: "s", wordBreak: "break-word", fontWeight: "medium" }, elemProps), children));
|
|
15
|
+
},
|
|
16
|
+
});
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TableRow.d.ts","sourceRoot":"","sources":["../../../../table/lib/TableRow.tsx"],"names":[],"mappings":"AAIA,eAAO,MAAM,QAAQ,qMAqBnB,CAAC"}
|