@chakra-ui/react
Version:
Responsive and accessible React UI components built with React and Emotion
122 lines (121 loc) • 2.85 kB
TypeScript
export declare const tableSlotRecipe: import("../..").SlotRecipeDefinition<"root" | "caption" | "header" | "body" | "footer" | "row" | "columnHeader" | "cell", {
interactive: {
true: {
body: {
"& tr": {
_hover: {
bg: "colorPalette.subtle";
};
};
};
};
};
stickyHeader: {
true: {
header: {
"& :where(tr)": {
top: "var(--table-sticky-offset, 0)";
position: "sticky";
zIndex: number;
};
};
};
};
striped: {
true: {
row: {
"&:nth-of-type(odd) td": {
bg: "bg.muted";
};
};
};
};
showColumnBorder: {
true: {
columnHeader: {
"&:not(:last-of-type)": {
borderInlineEndWidth: "1px";
};
};
cell: {
"&:not(:last-of-type)": {
borderInlineEndWidth: "1px";
};
};
};
};
variant: {
line: {
columnHeader: {
borderBottomWidth: "1px";
};
cell: {
borderBottomWidth: "1px";
};
row: {
bg: "bg";
};
};
outline: {
root: {
boxShadow: "0 0 0 1px {colors.border}";
overflow: "hidden";
};
columnHeader: {
borderBottomWidth: "1px";
};
header: {
bg: "bg.muted";
};
row: {
"&:not(:last-of-type)": {
borderBottomWidth: "1px";
};
};
footer: {
borderTopWidth: "1px";
};
};
};
size: {
sm: {
root: {
textStyle: "sm";
};
columnHeader: {
px: "2";
py: "2";
};
cell: {
px: "2";
py: "2";
};
};
md: {
root: {
textStyle: "sm";
};
columnHeader: {
px: "3";
py: "3";
};
cell: {
px: "3";
py: "3";
};
};
lg: {
root: {
textStyle: "md";
};
columnHeader: {
px: "4";
py: "3";
};
cell: {
px: "4";
py: "3";
};
};
};
}>;