Skip to content
This repository was archived by the owner on Jan 23, 2024. It is now read-only.

Commit f0e25d1

Browse files
amandaguthrieamandaguthrie
authored
feat(table): add theming section (#1666)
1 parent 3fb0f71 commit f0e25d1

File tree

3 files changed

+575
-1
lines changed

3 files changed

+575
-1
lines changed

‎configs/sandpack-contents/component-theming/table.js

+214
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,214 @@
1+
module.exports = {
2+
App: `import { Box, SimpleGrid, IconButton, useColorMode, TableContainer, Table, Tr, Td, Th, Thead, Tbody, Tfoot, TableCaption, } from "@chakra-ui/react";
3+
import { FaMoon, FaSun, FaPhone } from "react-icons/fa";
4+
5+
export default function App() {
6+
const { toggleColorMode, colorMode } = useColorMode();
7+
return (
8+
<Box position="relative" h="100vh">
9+
<TableContainer padding="1rem">
10+
<Table>
11+
<TableCaption placement="top">XL Size Rounded Variant Table</TableCaption>
12+
<Thead>
13+
<Tr><Th>Month</Th><Th isNumeric>Spend</Th></Tr>
14+
</Thead>
15+
<Tbody>
16+
<Tr><Td>January</Td><Td isNumeric>100</Td></Tr>
17+
<Tr><Td>February</Td><Td isNumeric>100</Td></Tr>
18+
<Tr><Td>March</Td><Td isNumeric>100</Td></Tr>
19+
<Tr><Td>April</Td><Td isNumeric>100</Td></Tr>
20+
</Tbody>
21+
<Tfoot>
22+
<Tr><Th>Total</Th><Th isNumeric>400</Th></Tr>
23+
</Tfoot>
24+
</Table>
25+
</TableContainer>
26+
27+
<TableContainer padding="1rem">
28+
<Table variant="striped" size="sm">
29+
<TableCaption placement="top">Size: Small, Variant: Striped</TableCaption>
30+
<Thead>
31+
<Tr><Th>Month</Th><Th isNumeric>Spend</Th></Tr>
32+
</Thead>
33+
<Tbody>
34+
<Tr><Td>January</Td><Td isNumeric>100</Td></Tr>
35+
<Tr><Td>February</Td><Td isNumeric>100</Td></Tr>
36+
<Tr><Td>March</Td><Td isNumeric>100</Td></Tr>
37+
<Tr><Td>April</Td><Td isNumeric>100</Td></Tr>
38+
</Tbody>
39+
<Tfoot>
40+
<Tr><Th>Total</Th><Th isNumeric>400</Th></Tr>
41+
</Tfoot>
42+
</Table>
43+
</TableContainer>
44+
45+
<IconButton
46+
aria-label="toggle theme"
47+
rounded="full"
48+
size="xs"
49+
position="fixed"
50+
top={4}
51+
left={4}
52+
onClick={toggleColorMode} icon={colorMode === "dark" ? <FaSun /> : <FaMoon />}
53+
/>
54+
</Box>
55+
);
56+
}`, Index: `import * as React from "react";
57+
import { createRoot } from "react-dom/client";
58+
import { ChakraProvider, extendTheme } from "@chakra-ui/react";
59+
60+
import App from "./App";
61+
import { tableTheme } from "./theme/components/Table";
62+
63+
const theme = extendTheme({
64+
components: {
65+
Table: tableTheme,
66+
}
67+
});
68+
69+
const container = document.getElementById("root");
70+
const root = createRoot(container!);
71+
root.render(
72+
<ChakraProvider theme={theme}>
73+
<App />
74+
</ChakraProvider>
75+
);`, TableTheme: `import { tableAnatomy as parts } from "@chakra-ui/anatomy";
76+
import {
77+
createMultiStyleConfigHelpers,
78+
defineStyle,
79+
} from "@chakra-ui/styled-system"
80+
81+
const { definePartsStyle, defineMultiStyleConfig } =
82+
createMultiStyleConfigHelpers(parts.keys)
83+
84+
// default base style from the Table theme
85+
const baseStyle = definePartsStyle({
86+
table: {
87+
fontVariantNumeric: "lining-nums tabular-nums",
88+
borderCollapse: "collapse",
89+
width: "full",
90+
},
91+
th: {
92+
fontFamily: "heading",
93+
fontWeight: "bold",
94+
textTransform: "uppercase",
95+
letterSpacing: "wider",
96+
textAlign: "start",
97+
},
98+
td: {
99+
textAlign: "start",
100+
},
101+
caption: {
102+
mt: 4,
103+
fontFamily: "heading",
104+
textAlign: "center",
105+
fontWeight: "medium",
106+
},
107+
})
108+
109+
const variantStriped = definePartsStyle((props) => {
110+
return {
111+
td: {
112+
fontFamily: "mono", // change font family to mono
113+
}
114+
}
115+
})
116+
117+
const variantSimple = definePartsStyle((props) => {
118+
return {
119+
td: {
120+
fontWeight: "semibold", // change font weight to semibold
121+
},
122+
}
123+
})
124+
125+
// Defining a custom variant
126+
const variantRounded = definePartsStyle((props) => {
127+
const { colorScheme: c, colorMode } = props;
128+
129+
return {
130+
tr: {
131+
"td:first-child": {
132+
borderTopLeftRadius: "full",
133+
borderBottomLeftRadius: "full"
134+
},
135+
"td:last-child": {
136+
borderTopRightRadius: "full",
137+
borderBottomRightRadius: "full"
138+
},
139+
},
140+
th: {
141+
"&[data-is-numeric=true]": {
142+
textAlign: "end"
143+
}
144+
},
145+
td: {
146+
"&[data-is-numeric=true]": {
147+
textAlign: "end"
148+
}
149+
},
150+
caption: {
151+
color: colorMode === "light" ? \`\${c}.600\` : \`\${c}.100\`,
152+
},
153+
tbody: {
154+
tr: {
155+
"&:nth-of-type(odd)": {
156+
"th, td": {
157+
borderBottomWidth: "1px",
158+
borderColor: colorMode === "light" ? \`\${c}.100\` : \`\${c}.700\`,
159+
},
160+
td: {
161+
background: colorMode === "light" ? \`\${c}.100\` : \`\${c}.700\`,
162+
}
163+
},
164+
"&:nth-of-type(even)": {
165+
"th, td": {
166+
borderBottomWidth: "1px",
167+
borderColor: colorMode === "light" ? \`\${c}.300\` : \`\${c}.600\`,
168+
},
169+
td: {
170+
background: colorMode === "light" ? \`\${c}.300\` : \`\${c}.600\`,
171+
}
172+
}
173+
}
174+
},
175+
tfoot: {
176+
tr: {
177+
"&:last-of-type": {
178+
th: { borderBottomWidth: 0 }
179+
}
180+
}
181+
}
182+
};
183+
});
184+
185+
const variants = {
186+
simple: variantSimple,
187+
striped: variantStriped,
188+
rounded: variantRounded,
189+
}
190+
191+
const xl = defineStyle({
192+
fontSize: 'lg',
193+
px: '4',
194+
h: '12',
195+
})
196+
197+
const sizes = {
198+
xl: definePartsStyle({
199+
td: xl,
200+
th: xl,
201+
}),
202+
}
203+
204+
export const tableTheme = defineMultiStyleConfig({
205+
baseStyle,
206+
variants,
207+
sizes,
208+
defaultProps: {
209+
size: "xl",
210+
variant: "rounded",
211+
colorScheme: "gray"
212+
},
213+
})`,
214+
}

‎configs/search-meta.json

+56
Original file line numberDiff line numberDiff line change
@@ -56522,6 +56522,62 @@
5652256522
"url": "/docs/components/table/theming",
5652356523
"hierarchy": {}
5652456524
},
56525+
{
56526+
"content": "Table Anatomy",
56527+
"id": "//docs/components/table/theming",
56528+
"type": "lvl2",
56529+
"url": "/docs/components/table/theming#table-anatomy",
56530+
"hierarchy": { "lvl2": "Table Anatomy", "lvl3": null }
56531+
},
56532+
{
56533+
"content": "Theming utilities",
56534+
"id": "//docs/components/table/theming",
56535+
"type": "lvl2",
56536+
"url": "/docs/components/table/theming#theming-utilities",
56537+
"hierarchy": { "lvl2": "Theming utilities", "lvl3": null }
56538+
},
56539+
{
56540+
"content": "Customizing the default Table theme",
56541+
"id": "//docs/components/table/theming",
56542+
"type": "lvl2",
56543+
"url": "/docs/components/table/theming#customizing-the-default-table-theme",
56544+
"hierarchy": { "lvl2": "Customizing the default Table theme", "lvl3": null }
56545+
},
56546+
{
56547+
"content": "Theming properties",
56548+
"id": "//docs/components/table/theming",
56549+
"type": "lvl2",
56550+
"url": "/docs/components/table/theming#theming-properties",
56551+
"hierarchy": { "lvl2": "Theming properties", "lvl3": null }
56552+
},
56553+
{
56554+
"content": "Adding a custom table size",
56555+
"id": "//docs/components/table/theming",
56556+
"type": "lvl2",
56557+
"url": "/docs/components/table/theming#adding-a-custom-table-size",
56558+
"hierarchy": { "lvl2": "Adding a custom table size", "lvl3": null }
56559+
},
56560+
{
56561+
"content": "Adding a custom table variant",
56562+
"id": "//docs/components/table/theming",
56563+
"type": "lvl2",
56564+
"url": "/docs/components/table/theming#adding-a-custom-table-variant",
56565+
"hierarchy": { "lvl2": "Adding a custom table variant", "lvl3": null }
56566+
},
56567+
{
56568+
"content": "Changing default table properties",
56569+
"id": "//docs/components/table/theming",
56570+
"type": "lvl2",
56571+
"url": "/docs/components/table/theming#changing-default-table-properties",
56572+
"hierarchy": { "lvl2": "Changing default table properties", "lvl3": null }
56573+
},
56574+
{
56575+
"content": "Showcase",
56576+
"id": "//docs/components/table/theming",
56577+
"type": "lvl2",
56578+
"url": "/docs/components/table/theming#showcase",
56579+
"hierarchy": { "lvl2": "Showcase", "lvl3": null }
56580+
},
5652556581
{
5652656582
"content": "Table",
5652756583
"id": "//docs/components/table/usage",

0 commit comments

Comments
 (0)