@hypothesis/frontend-shared
Version:
Shared components, styles and utilities for Hypothesis projects
1,219 lines (1,218 loc) • 55.7 kB
JavaScript
var _jsxFileName = "/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/patterns/data/TablePage.tsx";
import { ScrollContainer, Scroll, Table, TableBody, TableCell, TableHead, TableRow } from '../../../../';
import Library from '../../Library';
import { jsxDEV as _jsxDEV } from "preact/jsx-dev-runtime";
export default function TablePage() {
return _jsxDEV(Library.Page, {
title: "Table",
intro: _jsxDEV("p", {
children: [_jsxDEV("code", {
children: "Table"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 18,
columnNumber: 11
}, this), ", ", _jsxDEV("code", {
children: "TableHead"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 18,
columnNumber: 31
}, this), ", ", _jsxDEV("code", {
children: "TableBody"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 18,
columnNumber: 55
}, this), ",", ' ', _jsxDEV("code", {
children: "TableRow"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 19,
columnNumber: 11
}, this), " and ", _jsxDEV("code", {
children: "TableCell"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 19,
columnNumber: 37
}, this), " are presentational components for rendering table content."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 17,
columnNumber: 9
}, this),
children: _jsxDEV(Library.Section, {
title: "Table",
children: [_jsxDEV(Library.SectionL2, {
children: [_jsxDEV(Library.Usage, {
componentName: "Table, TableHead, TableBody, TableRow, TableCell",
size: "sm"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 26,
columnNumber: 11
}, this), _jsxDEV(Library.Demo, {
title: "Basic Table",
withSource: true,
children: _jsxDEV(Table, {
title: "Some sushi rolls",
children: [_jsxDEV(TableHead, {
children: _jsxDEV(TableRow, {
children: [_jsxDEV(TableCell, {
children: "Sushi roll name"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 34,
columnNumber: 19
}, this), _jsxDEV(TableCell, {
children: "Definition"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 35,
columnNumber: 19
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 33,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 32,
columnNumber: 15
}, this), _jsxDEV(TableBody, {
children: [_jsxDEV(TableRow, {
children: [_jsxDEV(TableCell, {
children: "Alaskan roll"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 40,
columnNumber: 19
}, this), _jsxDEV(TableCell, {
children: "A variant of the California roll with smoked salmon on the inside, or layered on the outside."
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 41,
columnNumber: 19
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 39,
columnNumber: 17
}, this), _jsxDEV(TableRow, {
children: [_jsxDEV(TableCell, {
children: "Boston roll"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 47,
columnNumber: 19
}, this), _jsxDEV(TableCell, {
children: "An uramaki California roll with poached shrimp instead of imitation crab."
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 48,
columnNumber: 19
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 46,
columnNumber: 17
}, this), _jsxDEV(TableRow, {
children: [_jsxDEV(TableCell, {
children: "British Columbia roll"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 54,
columnNumber: 19
}, this), _jsxDEV(TableCell, {
children: "A roll containing grilled or barbecued salmon skin, cucumber, sweet sauce, sometimes with roe. Also sometimes referred to as salmon skin rolls outside of British Columbia, Canada."
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 55,
columnNumber: 19
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 53,
columnNumber: 17
}, this), _jsxDEV(TableRow, {
children: [_jsxDEV(TableCell, {
children: "California roll"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 63,
columnNumber: 19
}, this), _jsxDEV(TableCell, {
children: ["A roll consisting of avocado, kani kama (imitation crab/crab stick) (also can contain real crab in ", 'premium', ' ', "varieties), cucumber, and tobiko, often made as uramaki (with rice on the outside, nori on the inside)."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 64,
columnNumber: 19
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 62,
columnNumber: 17
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 38,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 31,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 30,
columnNumber: 11
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 25,
columnNumber: 9
}, this), _jsxDEV(Library.SectionL2, {
title: "Working with Tables",
children: [_jsxDEV(Library.SectionL3, {
title: "Composing Table components",
children: _jsxDEV("p", {
children: ["All ", _jsxDEV("code", {
children: "Table*"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 79,
columnNumber: 19
}, this), " (", _jsxDEV("code", {
children: "TableHead"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 79,
columnNumber: 40
}, this), ",", ' ', _jsxDEV("code", {
children: "TableFoot"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 80,
columnNumber: 15
}, this), ", ", _jsxDEV("code", {
children: "TableRow"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 80,
columnNumber: 39
}, this), ",", ' ', _jsxDEV("code", {
children: "TableCell"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 81,
columnNumber: 15
}, this), ", ", _jsxDEV("code", {
children: "TableBody"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 81,
columnNumber: 39
}, this), ") are presentational components and take all standard props from the presentational component API. All also accept HTML attributes for their associated element."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 78,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 77,
columnNumber: 11
}, this), _jsxDEV(Library.SectionL3, {
title: "Sizing Tables",
children: [_jsxDEV("p", {
children: "Table column width is established by the first row, which are typically headers."
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 89,
columnNumber: 13
}, this), _jsxDEV(Library.Demo, {
title: "Controlling column width",
withSource: true,
children: _jsxDEV(Table, {
title: "Some sushi rolls",
children: [_jsxDEV(TableHead, {
children: _jsxDEV(TableRow, {
children: [_jsxDEV(TableCell, {
classes: "w-[200px]",
children: "Sushi roll name"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 98,
columnNumber: 21
}, this), _jsxDEV(TableCell, {
children: "Definition"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 99,
columnNumber: 21
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 97,
columnNumber: 19
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 96,
columnNumber: 17
}, this), _jsxDEV(TableBody, {
children: [_jsxDEV(TableRow, {
children: [_jsxDEV(TableCell, {
children: "Alaskan roll"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 104,
columnNumber: 21
}, this), _jsxDEV(TableCell, {
children: "A variant of the California roll with smoked salmon on the inside, or layered on the outside."
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 105,
columnNumber: 21
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 103,
columnNumber: 19
}, this), _jsxDEV(TableRow, {
children: [_jsxDEV(TableCell, {
children: "Boston roll"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 111,
columnNumber: 21
}, this), _jsxDEV(TableCell, {
children: "An uramaki California roll with poached shrimp instead of imitation crab."
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 112,
columnNumber: 21
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 110,
columnNumber: 19
}, this), _jsxDEV(TableRow, {
children: [_jsxDEV(TableCell, {
children: "British Columbia roll"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 118,
columnNumber: 21
}, this), _jsxDEV(TableCell, {
children: "A roll containing grilled or barbecued salmon skin, cucumber, sweet sauce, sometimes with roe. Also sometimes referred to as salmon skin rolls outside of British Columbia, Canada."
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 119,
columnNumber: 21
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 117,
columnNumber: 19
}, this), _jsxDEV(TableRow, {
children: [_jsxDEV(TableCell, {
children: "California roll"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 127,
columnNumber: 21
}, this), _jsxDEV(TableCell, {
children: ["A roll consisting of avocado, kani kama (imitation crab/crab stick) (also can contain real crab in", ' ', 'premium', " varieties), cucumber, and tobiko, often made as uramaki (with rice on the outside, nori on the inside)."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 128,
columnNumber: 21
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 126,
columnNumber: 19
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 102,
columnNumber: 17
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 95,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 94,
columnNumber: 13
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 88,
columnNumber: 11
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 76,
columnNumber: 9
}, this), _jsxDEV(Library.SectionL2, {
id: "table-props",
title: "Component API",
children: [_jsxDEV("code", {
children: "Table"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 142,
columnNumber: 11
}, this), " accepts all standard", ' ', _jsxDEV(Library.Link, {
href: "/using-components#presentational-components-api",
children: "presentational component props"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 143,
columnNumber: 11
}, this), ".", _jsxDEV(Library.SectionL3, {
title: "stickyHeader",
children: [_jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: "Make the table headers sticky in scrolling contexts"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 149,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: "boolean"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 153,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 152,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "default",
children: _jsxDEV("code", {
children: "false"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 156,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 155,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 148,
columnNumber: 13
}, this), _jsxDEV(Library.Demo, {
title: "Table with stickyHeader and rounded Scroll",
withSource: true,
children: _jsxDEV("div", {
className: "h-[250px]",
children: _jsxDEV(ScrollContainer, {
rounded: true,
children: _jsxDEV(Scroll, {
children: _jsxDEV(Table, {
title: "Some sushi rolls",
stickyHeader: true,
borderless: true,
children: [_jsxDEV(TableHead, {
children: _jsxDEV(TableRow, {
children: [_jsxDEV(TableCell, {
classes: "w-[180px]",
children: "Sushi roll name"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 169,
columnNumber: 27
}, this), _jsxDEV(TableCell, {
children: "Definition"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 172,
columnNumber: 27
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 168,
columnNumber: 25
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 167,
columnNumber: 23
}, this), _jsxDEV(TableBody, {
children: [_jsxDEV(TableRow, {
children: [_jsxDEV(TableCell, {
children: "Alaskan roll"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 177,
columnNumber: 27
}, this), _jsxDEV(TableCell, {
children: "A variant of the California roll with smoked salmon on the inside, or layered on the outside."
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 178,
columnNumber: 27
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 176,
columnNumber: 25
}, this), _jsxDEV(TableRow, {
children: [_jsxDEV(TableCell, {
children: "Boston roll"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 184,
columnNumber: 27
}, this), _jsxDEV(TableCell, {
children: "An uramaki California roll with poached shrimp instead of imitation crab."
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 185,
columnNumber: 27
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 183,
columnNumber: 25
}, this), _jsxDEV(TableRow, {
children: [_jsxDEV(TableCell, {
children: "British Columbia roll"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 191,
columnNumber: 27
}, this), _jsxDEV(TableCell, {
children: "A roll containing grilled or barbecued salmon skin, cucumber, sweet sauce, sometimes with roe. Also sometimes referred to as salmon skin rolls outside of British Columbia, Canada."
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 192,
columnNumber: 27
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 190,
columnNumber: 25
}, this), _jsxDEV(TableRow, {
children: [_jsxDEV(TableCell, {
children: "California roll"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 200,
columnNumber: 27
}, this), _jsxDEV(TableCell, {
children: ["A roll consisting of avocado, kani kama (imitation crab/crab stick) (also can contain real crab in", ' ', 'premium', " varieties), cucumber, and tobiko, often made as uramaki (with rice on the outside, nori on the inside)."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 201,
columnNumber: 27
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 199,
columnNumber: 25
}, this), _jsxDEV(TableRow, {
children: [_jsxDEV(TableCell, {
children: "Dynamite roll"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 210,
columnNumber: 27
}, this), _jsxDEV(TableCell, {
children: "A roll including yellowtail (hamachi) or prawn tempura, and fillings such as bean sprouts, carrots, avocado, cucumber, chili, spicy mayonnaise, and roe."
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 211,
columnNumber: 27
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 209,
columnNumber: 25
}, this), _jsxDEV(TableRow, {
children: [_jsxDEV(TableCell, {
children: "Hawaiian roll"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 218,
columnNumber: 27
}, this), _jsxDEV(TableCell, {
children: "A roll containing sh\u014Dyu tuna (canned), tamago, kanpy\u014D, kamaboko, and the distinctive red and green hana ebi (shrimp powder)."
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 219,
columnNumber: 27
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 217,
columnNumber: 25
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 175,
columnNumber: 23
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 166,
columnNumber: 21
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 165,
columnNumber: 19
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 164,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 163,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 159,
columnNumber: 13
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 147,
columnNumber: 11
}, this), _jsxDEV(Library.SectionL3, {
title: "interactive",
children: [_jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: "Set this boolean prop if rows in the table are select-able or otherwise interactive."
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 234,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: "boolean"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 239,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 238,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "default",
children: _jsxDEV("code", {
children: "false"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 242,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 241,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 233,
columnNumber: 13
}, this), _jsxDEV(Library.Demo, {
title: "Table with interactive set",
withSource: true,
children: _jsxDEV(Table, {
title: "Some sushi rolls",
interactive: true,
children: [_jsxDEV(TableHead, {
children: _jsxDEV(TableRow, {
children: [_jsxDEV(TableCell, {
classes: "w-[180px]",
children: "Sushi roll name"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 250,
columnNumber: 21
}, this), _jsxDEV(TableCell, {
children: "Definition"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 251,
columnNumber: 21
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 249,
columnNumber: 19
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 248,
columnNumber: 17
}, this), _jsxDEV(TableBody, {
children: [_jsxDEV(TableRow, {
onClick: () => alert('Yum, Alaska roll!'),
children: [_jsxDEV(TableCell, {
children: "Alaskan roll"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 256,
columnNumber: 21
}, this), _jsxDEV(TableCell, {
children: "A variant of the California roll with smoked salmon on the inside, or layered on the outside."
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 257,
columnNumber: 21
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 255,
columnNumber: 19
}, this), _jsxDEV(TableRow, {
onClick: () => alert('This is a new one!'),
children: [_jsxDEV(TableCell, {
children: "Boston roll"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 263,
columnNumber: 21
}, this), _jsxDEV(TableCell, {
children: "An uramaki California roll with poached shrimp instead of imitation crab."
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 264,
columnNumber: 21
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 262,
columnNumber: 19
}, this), _jsxDEV(TableRow, {
onClick: () => alert('I call this a salmon-skin roll'),
children: [_jsxDEV(TableCell, {
children: "British Columbia roll"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 272,
columnNumber: 21
}, this), _jsxDEV(TableCell, {
children: "A roll containing grilled or barbecued salmon skin, cucumber, sweet sauce, sometimes with roe. Also sometimes referred to as salmon skin rolls outside of British Columbia, Canada."
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 273,
columnNumber: 21
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 269,
columnNumber: 19
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 254,
columnNumber: 17
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 247,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 246,
columnNumber: 13
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 232,
columnNumber: 11
}, this), _jsxDEV(Library.SectionL3, {
id: "table-props-borderless",
title: "borderless",
children: [_jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: ["Set this boolean prop if you want to remove the table", "'", "s outer borders, in case it is rendered in a container with its own borders."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 286,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: "boolean"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 292,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 291,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "default",
children: _jsxDEV("code", {
children: "false"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 295,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 294,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 285,
columnNumber: 13
}, this), _jsxDEV(Library.Demo, {
title: "Table without borders",
withSource: true,
children: _jsxDEV(Table, {
title: "Some sushi rolls",
borderless: true,
children: [_jsxDEV(TableHead, {
children: _jsxDEV(TableRow, {
children: [_jsxDEV(TableCell, {
classes: "w-[180px]",
children: "Sushi roll name"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 303,
columnNumber: 21
}, this), _jsxDEV(TableCell, {
children: "Definition"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 304,
columnNumber: 21
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 302,
columnNumber: 19
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 301,
columnNumber: 17
}, this), _jsxDEV(TableBody, {
children: [_jsxDEV(TableRow, {
onClick: () => alert('Yum, Alaska roll!'),
children: [_jsxDEV(TableCell, {
children: "Alaskan roll"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 309,
columnNumber: 21
}, this), _jsxDEV(TableCell, {
children: "A variant of the California roll with smoked salmon on the inside, or layered on the outside."
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 310,
columnNumber: 21
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 308,
columnNumber: 19
}, this), _jsxDEV(TableRow, {
onClick: () => alert('This is a new one!'),
children: [_jsxDEV(TableCell, {
children: "Boston roll"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 316,
columnNumber: 21
}, this), _jsxDEV(TableCell, {
children: "An uramaki California roll with poached shrimp instead of imitation crab."
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 317,
columnNumber: 21
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 315,
columnNumber: 19
}, this), _jsxDEV(TableRow, {
onClick: () => alert('I call this a salmon-skin roll'),
children: [_jsxDEV(TableCell, {
children: "British Columbia roll"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 325,
columnNumber: 21
}, this), _jsxDEV(TableCell, {
children: "A roll containing grilled or barbecued salmon skin, cucumber, sweet sauce, sometimes with roe. Also sometimes referred to as salmon skin rolls outside of British Columbia, Canada."
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 326,
columnNumber: 21
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 322,
columnNumber: 19
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 307,
columnNumber: 17
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 300,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 299,
columnNumber: 13
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 284,
columnNumber: 11
}, this), _jsxDEV(Library.SectionL3, {
title: "striped",
children: [_jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: "Renders a different background for odd rows."
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 339,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: "boolean"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 343,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 342,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "default",
children: _jsxDEV("code", {
children: "true"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 346,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 345,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 338,
columnNumber: 13
}, this), _jsxDEV(Library.Demo, {
title: "Table without stripes",
withSource: true,
children: _jsxDEV(Table, {
title: "Some sushi rolls",
striped: false,
children: [_jsxDEV(TableHead, {
children: _jsxDEV(TableRow, {
children: [_jsxDEV(TableCell, {
classes: "w-[180px]",
children: "Sushi roll name"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 354,
columnNumber: 21
}, this), _jsxDEV(TableCell, {
children: "Definition"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 355,
columnNumber: 21
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 353,
columnNumber: 19
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 352,
columnNumber: 17
}, this), _jsxDEV(TableBody, {
children: [_jsxDEV(TableRow, {
onClick: () => alert('Yum, Alaska roll!'),
children: [_jsxDEV(TableCell, {
children: "Alaskan roll"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 360,
columnNumber: 21
}, this), _jsxDEV(TableCell, {
children: "A variant of the California roll with smoked salmon on the inside, or layered on the outside."
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 361,
columnNumber: 21
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 359,
columnNumber: 19
}, this), _jsxDEV(TableRow, {
onClick: () => alert('This is a new one!'),
children: [_jsxDEV(TableCell, {
children: "Boston roll"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 367,
columnNumber: 21
}, this), _jsxDEV(TableCell, {
children: "An uramaki California roll with poached shrimp instead of imitation crab."
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 368,
columnNumber: 21
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 366,
columnNumber: 19
}, this), _jsxDEV(TableRow, {
onClick: () => alert('I call this a salmon-skin roll'),
children: [_jsxDEV(TableCell, {
children: "British Columbia roll"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 376,
columnNumber: 21
}, this), _jsxDEV(TableCell, {
children: "A roll containing grilled or barbecued salmon skin, cucumber, sweet sauce, sometimes with roe. Also sometimes referred to as salmon skin rolls outside of British Columbia, Canada."
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 377,
columnNumber: 21
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 373,
columnNumber: 19
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 358,
columnNumber: 17
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 351,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 350,
columnNumber: 13
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 337,
columnNumber: 11
}, this), _jsxDEV(Library.SectionL3, {
title: "grid",
children: [_jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: "Renders borders for table cells."
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 390,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: "boolean"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 394,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 393,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "default",
children: _jsxDEV("code", {
children: "false"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 397,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 396,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 389,
columnNumber: 13
}, this), _jsxDEV(Library.Demo, {
title: "Table with grid",
withSource: true,
children: _jsxDEV(Table, {
title: "Some sushi rolls",
grid: true,
children: [_jsxDEV(TableHead, {
children: _jsxDEV(TableRow, {
children: [_jsxDEV(TableCell, {
classes: "w-[180px]",
children: "Sushi roll name"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 405,
columnNumber: 21
}, this), _jsxDEV(TableCell, {
children: "Definition"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 406,
columnNumber: 21
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 404,
columnNumber: 19
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 403,
columnNumber: 17
}, this), _jsxDEV(TableBody, {
children: [_jsxDEV(TableRow, {
onClick: () => alert('Yum, Alaska roll!'),
children: [_jsxDEV(TableCell, {
children: "Alaskan roll"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 411,
columnNumber: 21
}, this), _jsxDEV(TableCell, {
children: "A variant of the California roll with smoked salmon on the inside, or layered on the outside."
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 412,
columnNumber: 21
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 410,
columnNumber: 19
}, this), _jsxDEV(TableRow, {
onClick: () => alert('This is a new one!'),
children: [_jsxDEV(TableCell, {
children: "Boston roll"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 418,
columnNumber: 21
}, this), _jsxDEV(TableCell, {
children: "An uramaki California roll with poached shrimp instead of imitation crab."
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 419,
columnNumber: 21
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 417,
columnNumber: 19
}, this), _jsxDEV(TableRow, {
onClick: () => alert('I call this a salmon-skin roll'),
children: [_jsxDEV(TableCell, {
children: "British Columbia roll"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 427,
columnNumber: 21
}, this), _jsxDEV(TableCell, {
children: "A roll containing grilled or barbecued salmon skin, cucumber, sweet sauce, sometimes with roe. Also sometimes referred to as salmon skin rolls outside of British Columbia, Canada."
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 428,
columnNumber: 21
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 424,
columnNumber: 19
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 409,
columnNumber: 17
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 402,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 401,
columnNumber: 13
}, this), _jsxDEV(Library.Demo, {
title: "Table with grid, without stripes",
withSource: true,
children: _jsxDEV(Table, {
title: "Some sushi rolls",
grid: true,
striped: false,
children: [_jsxDEV(TableHead, {
children: _jsxDEV(TableRow, {
children: [_jsxDEV(TableCell, {
classes: "w-[180px]",
children: "Sushi roll name"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 442,
columnNumber: 21
}, this), _jsxDEV(TableCell, {
children: "Definition"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 443,