@hypothesis/frontend-shared
Version:
Shared components, styles and utilities for Hypothesis projects
1,403 lines (1,401 loc) • 62.9 kB
JavaScript
var _jsxFileName = "/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/patterns/data/DataTablePage.tsx";
import { useCallback, useRef, useState } from 'preact/hooks';
import { Button, DataTable, Scroll } from '../../../../';
import { useOrderedRows } from '../../../../hooks/use-ordered-rows';
import Library from '../../Library';
import { nabokovNovels } from '../samples';
import { jsxDEV as _jsxDEV, Fragment as _Fragment } from "preact/jsx-dev-runtime";
const nabokovRows = nabokovNovels();
const nabokovColumns = [{
field: 'title',
label: 'Title'
}, {
field: 'year',
label: 'Year'
}, {
field: 'language',
label: 'Language'
}];
function ClientOrderableDataTable({
rows,
// By default, all columns are orderable
orderableColumns = nabokovColumns.map(({
field
}) => field),
...rest
}) {
const [order, setOrder] = useState();
const orderedRows = useOrderedRows(rows, order);
return _jsxDEV(_Fragment, {
children: [_jsxDEV(Button, {
classes: "mb-2",
onClick: () => setOrder(undefined),
children: "Reset order"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 30,
columnNumber: 7
}, this), _jsxDEV("div", {
className: "h-[250px]",
children: _jsxDEV(Scroll, {
children: _jsxDEV(DataTable, {
...rest,
rows: orderedRows,
order: order,
orderableColumns: orderableColumns,
onOrderChange: setOrder
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 35,
columnNumber: 11
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 34,
columnNumber: 9
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 33,
columnNumber: 7
}, this)]
}, void 0, true);
}
function AsyncOrderableDataTable({
rows,
// By default, all columns are orderable
orderableColumns = nabokovColumns.map(({
field
}) => field),
...rest
}) {
const [loading, setLoading] = useState(false);
const [order, setOrder] = useState();
const activeTimeout = useRef(null);
const changeOrder = useCallback(newOrder => {
if (activeTimeout.current) {
// Abort current ordering, if any
clearTimeout(activeTimeout.current);
}
setOrder(newOrder);
setLoading(true);
activeTimeout.current = setTimeout(() => {
setLoading(false);
activeTimeout.current = null;
}, 600);
}, []);
const orderedRows = useOrderedRows(rows, order);
return _jsxDEV(_Fragment, {
children: [_jsxDEV(Button, {
classes: "mb-2",
onClick: () => changeOrder(undefined),
children: "Reset order"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 79,
columnNumber: 7
}, this), _jsxDEV("div", {
className: "h-[250px]",
children: _jsxDEV(Scroll, {
children: _jsxDEV(DataTable, {
...rest,
rows: orderedRows,
order: order,
orderableColumns: orderableColumns,
onOrderChange: changeOrder,
loading: loading
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 84,
columnNumber: 11
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 83,
columnNumber: 9
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 82,
columnNumber: 7
}, this)]
}, void 0, true);
}
export default function DataTablePage() {
// For examples that support single selection
const [selectedRow, setSelectedRow] = useState(nabokovRows[nabokovRows.length - 1]);
const [selectedRow2, setSelectedRow2] = useState(null);
const [confirmedRow, setConfirmedRow] = useState(null);
// For examples that support multi-selection
const [selectedRows, setSelectedRows] = useState([]);
return _jsxDEV(Library.Page, {
title: "DataTable",
intro: _jsxDEV("p", {
children: [_jsxDEV("code", {
children: "DataTable"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 114,
columnNumber: 11
}, this), " is a composite component that provides support for interactive tables with columns and rows data. It is built atop the ", _jsxDEV("code", {
children: "Table"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 116,
columnNumber: 15
}, this), " family of presentational components."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 113,
columnNumber: 9
}, this),
children: _jsxDEV(Library.Section, {
children: [_jsxDEV(Library.SectionL2, {
children: [_jsxDEV(Library.Usage, {
componentName: "DataTable"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 122,
columnNumber: 11
}, this), _jsxDEV(Library.Demo, {
title: "Basic DataTable",
withSource: true,
children: _jsxDEV("div", {
className: "w-full h-[250px]",
children: _jsxDEV(Scroll, {
children: _jsxDEV(DataTable, {
title: "A subset of Nabokov's novels with publish date and original language",
rows: nabokovRows,
columns: nabokovColumns
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 127,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 126,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 125,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 124,
columnNumber: 11
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 121,
columnNumber: 9
}, this), _jsxDEV(Library.SectionL2, {
title: "Working with tables",
children: [_jsxDEV(Library.SectionL3, {
title: "Rows, columns and items",
children: [_jsxDEV("p", {
children: [_jsxDEV("code", {
children: "DataTable"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 140,
columnNumber: 15
}, this), " operates on ", _jsxDEV("code", {
children: "rows"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 140,
columnNumber: 50
}, this), " and", _jsxDEV("code", {
children: "columns"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 141,
columnNumber: 15
}, this), ". Rows are generic key-value objects and columns determine which fields in each row are rendered in the table."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 139,
columnNumber: 13
}, this), _jsxDEV("p", {
children: ["All of the ", _jsxDEV("code", {
children: "DataTable"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 146,
columnNumber: 26
}, this), " examples on this page use the same ", _jsxDEV("code", {
children: "rows"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 147,
columnNumber: 20
}, this), " data:"]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 145,
columnNumber: 13
}, this), _jsxDEV("div", {
className: "h-[300px]",
children: _jsxDEV(Library.Code, {
title: "rows data used for examples on this page",
content: `const rows = [
{
title: 'Машенька',
year: '1926',
language: 'Russian',
translatedTitle: 'Mary',
},
{
title: 'Король, дама, валет',
year: '1928',
language: 'Russian',
translatedTitle: 'King, Queen, Knave',
},
{
title: 'Защита Лужина',
year: '1930',
language: 'Russian',
translatedTitle: 'The Defense',
},
{
title: 'Соглядатай',
year: '1930',
language: 'Russian',
translatedTitle: 'The Eye',
},
{
title: 'The Real Life of Sebastian Knight',
year: '1941',
language: 'English',
},
{
title: 'Bend Sinister',
year: '1947',
language: 'English',
},
{
title: 'Pale Fire',
year: '1965',
language: 'English',
},
{
title: 'Подвиг',
year: '1932',
language: 'Russian',
translatedTitle: 'Glory',
},
{
title: 'Ada or Ardor: A Family Chronicle',
year: '1969',
language: 'English',
},
];`
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 150,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 149,
columnNumber: 13
}, this), _jsxDEV(Library.Code, {
title: "example of columns",
content: `const columns = [
{ field: 'title', label: 'Title', classes: 'w-[80%]' },
{ field: 'year', label: 'Year' },
];`
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 206,
columnNumber: 13
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 138,
columnNumber: 11
}, this), _jsxDEV(Library.SectionL3, {
title: "Grid DataTables with scroll",
children: _jsxDEV(Library.Demo, {
title: "Grid DataTables with scroll",
withSource: true,
children: _jsxDEV("div", {
className: "w-full h-[250px]",
children: _jsxDEV(Scroll, {
children: _jsxDEV(DataTable, {
title: "A subset of Nabokov's novels with publish date and original language",
rows: nabokovRows,
columns: nabokovColumns,
grid: true
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 218,
columnNumber: 19
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 217,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 216,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 215,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 214,
columnNumber: 11
}, this), _jsxDEV(Library.SectionL3, {
title: "Interactive DataTables",
children: [_jsxDEV("p", {
children: ["The presence of a ", _jsxDEV("code", {
children: "onSelectRow"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 230,
columnNumber: 33
}, this), ",", ' ', _jsxDEV("code", {
children: "onSelectRows"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 231,
columnNumber: 15
}, this), " or ", _jsxDEV("code", {
children: "onConfirmRow"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 231,
columnNumber: 44
}, this), " callback prop will cause a ", _jsxDEV("code", {
children: "DataTable"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 232,
columnNumber: 33
}, this), " to be interactive."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 229,
columnNumber: 13
}, this), _jsxDEV("p", {
children: ["Rows in interactive ", _jsxDEV("code", {
children: "DataTable"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 235,
columnNumber: 35
}, this), "s can be", ' ', _jsxDEV("strong", {
children: "selected"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 236,
columnNumber: 15
}, this), " by a single click or keyboard navigation focus, then subsequently \u2014 if ", _jsxDEV("code", {
children: "onConfirmRow"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 237,
columnNumber: 45
}, this), " is provided \u2014 ", _jsxDEV("strong", {
children: "confirmed"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 238,
columnNumber: 26
}, this), " with a double-click or by pressing ", "'Enter'", "."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 234,
columnNumber: 13
}, this), _jsxDEV("p", {
children: [_jsxDEV("code", {
children: "DataTable"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 242,
columnNumber: 15
}, this), " does not maintain internal state and expects a parent component to provide the current selected rows. If the user should be able to select a single row, this should be passed via ", _jsxDEV("code", {
children: "selectedRow"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 245,
columnNumber: 26
}, this), ". If the user should be allowed to selected multiple rows, the selection should be passed via", ' ', _jsxDEV("code", {
children: "selectedRows"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 247,
columnNumber: 15
}, this), "."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 241,
columnNumber: 13
}, this), _jsxDEV(Library.Demo, {
title: "Interactive DataTable with callbacks for row selection, confirmation",
withSource: true,
children: _jsxDEV("div", {
className: "space-y-2 w-full",
children: [_jsxDEV("div", {
children: ["Selected row:", ' ', selectedRow2 ? _jsxDEV("i", {
children: selectedRow2.title
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 257,
columnNumber: 35
}, this) : 'None']
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 255,
columnNumber: 17
}, this), _jsxDEV("div", {
children: ["Confirmed row:", ' ', confirmedRow ? _jsxDEV("i", {
children: confirmedRow.title
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 261,
columnNumber: 35
}, this) : 'None']
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 259,
columnNumber: 17
}, this), _jsxDEV("div", {
className: "w-full h-[250px]",
children: _jsxDEV(Scroll, {
children: _jsxDEV(DataTable, {
title: "Some of Nabokov's novels",
rows: nabokovRows,
columns: nabokovColumns,
selectedRow: selectedRow2,
onSelectRow: row => setSelectedRow2(row),
onConfirmRow: row => setConfirmedRow(row)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 265,
columnNumber: 21
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 264,
columnNumber: 19
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 263,
columnNumber: 17
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 254,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 250,
columnNumber: 13
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 228,
columnNumber: 11
}, this), _jsxDEV(Library.SectionL3, {
title: "Tables in constrained spaces",
children: [_jsxDEV("p", {
children: [_jsxDEV("code", {
children: "DataTable"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 280,
columnNumber: 15
}, this), " and ", _jsxDEV("code", {
children: "Table"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 280,
columnNumber: 42
}, this), " are designed to be compatible with scrolling contexts. The examples on this page are constrained within ", _jsxDEV("code", {
children: "Scroll"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 282,
columnNumber: 34
}, this), " components."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 279,
columnNumber: 13
}, this), _jsxDEV("p", {
children: [_jsxDEV("code", {
children: "DataTable"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 285,
columnNumber: 15
}, this), " is designed to fill its containing space vertically. If there are sparse data (fewer rows than fill the space), the ", _jsxDEV("code", {
children: "Table"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 287,
columnNumber: 27
}, this), " will still occupy the full vertical height."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 284,
columnNumber: 13
}, this), _jsxDEV(Library.Demo, {
withSource: true,
title: "Constrained Table with sparse content",
children: _jsxDEV("div", {
className: "w-full h-[250px]",
children: _jsxDEV(Scroll, {
children: _jsxDEV(DataTable, {
title: "A subset of Nabokov's novels with publish date and original language",
rows: [nabokovRows[0], nabokovRows[1]],
columns: nabokovColumns
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 297,
columnNumber: 19
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 296,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 295,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 291,
columnNumber: 13
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 278,
columnNumber: 11
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 137,
columnNumber: 9
}, this), _jsxDEV(Library.SectionL2, {
title: "Component API",
children: [_jsxDEV("p", {
children: [_jsxDEV("code", {
children: "DataTable"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 310,
columnNumber: 13
}, this), " accepts all standard", ' ', _jsxDEV(Library.Link, {
href: "/using-components#composite-components-api",
children: "composite component props"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 311,
columnNumber: 13
}, this), ' ', "and some", ' ', _jsxDEV(Library.Link, {
href: "/data-table#table-props",
children: [_jsxDEV("code", {
children: "Table"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 316,
columnNumber: 15
}, this), " presentational props"]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 315,
columnNumber: 13
}, this), "."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 309,
columnNumber: 11
}, this), _jsxDEV(Library.SectionL3, {
title: "columns",
children: [_jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: ["An array of objects defining headers to render, as well as which fields in ", _jsxDEV("code", {
children: "rows"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 324,
columnNumber: 27
}, this), " are rendered. Optional", ' ', _jsxDEV("code", {
children: "classes"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 325,
columnNumber: 17
}, this), " extend CSS classes applied to associated", ' ', _jsxDEV("code", {
children: "th"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 326,
columnNumber: 17
}, this), " elements."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 322,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV(Library.Code, {
size: "sm",
content: `Array<{
field: string;
label: string;
classes?: string;
}>
`
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 329,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 328,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "required",
children: _jsxDEV("code", {
children: "true"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 340,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 339,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 321,
columnNumber: 13
}, this), _jsxDEV(Library.Demo, {
title: "Setting columns for a DataTable",
withSource: true,
children: _jsxDEV("div", {
className: "w-full h-[250px]",
children: _jsxDEV(Scroll, {
children: _jsxDEV(DataTable, {
title: "Some of Nabokov's novels and their publish date",
rows: nabokovRows,
columns: [{
field: 'title',
label: 'Title',
classes: 'w-[80%]'
}, {
field: 'year',
label: 'Year'
}]
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 346,
columnNumber: 19
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 345,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 344,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 343,
columnNumber: 13
}, this), _jsxDEV(Library.Code, {
title: "columns data used for this example",
content: `const columns = [
{ field: 'title', label: 'Title', classes: 'w-[80%]' },
{ field: 'year', label: 'Year' },
];`
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 357,
columnNumber: 13
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 320,
columnNumber: 11
}, this), _jsxDEV(Library.SectionL3, {
title: "rows",
children: [_jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: ["Array of objects mapping field names to values. Only fields that are declared in ", _jsxDEV("code", {
children: "columns"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 370,
columnNumber: 33
}, this), " will be rendered."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 368,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: `Array<Record<string,any>`
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 373,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 372,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "required",
children: _jsxDEV("code", {
children: "true"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 376,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 375,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 367,
columnNumber: 13
}, this), _jsxDEV(Library.Demo, {
title: "Only fields declared in columns are rendered",
withSource: true,
children: _jsxDEV("div", {
className: "w-full h-[250px]",
children: _jsxDEV(Scroll, {
children: _jsxDEV(DataTable, {
title: "A subset of Nabokov's novels with publish date and original language",
rows: nabokovRows,
columns: nabokovColumns
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 386,
columnNumber: 19
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 385,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 384,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 380,
columnNumber: 13
}, this), _jsxDEV("p", {
children: ["In this example, the ", _jsxDEV("code", {
children: "translatedTitle"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 396,
columnNumber: 36
}, this), " field is not referenced in ", _jsxDEV("code", {
children: "columns"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 397,
columnNumber: 29
}, this), ", so it is not rendered."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 395,
columnNumber: 13
}, this), _jsxDEV(Library.Code, {
title: "columns data used for this example",
content: `const columns = [
{ field: 'title', label: 'Title' },
{ field: 'year', label: 'Year' },
{ field: 'language', label: 'Language' },
];`
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 399,
columnNumber: 13
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 366,
columnNumber: 11
}, this), _jsxDEV(Library.SectionL3, {
title: "emptyMessage",
children: [_jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: ["Message to show if there are no ", _jsxDEV("code", {
children: "rows"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 412,
columnNumber: 49
}, this), ". Superseded by", ' ', _jsxDEV("code", {
children: "loading"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 413,
columnNumber: 17
}, this), " state."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 411,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: `preact.ComponentChildren`
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 416,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 415,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 410,
columnNumber: 13
}, this), _jsxDEV(Library.Demo, {
withSource: true,
children: _jsxDEV("div", {
className: "w-full h-[250px]",
children: _jsxDEV(Scroll, {
children: _jsxDEV(DataTable, {
title: "Some of Nabokov's novels",
rows: [],
columns: nabokovColumns,
emptyMessage: _jsxDEV("strong", {
children: "No books found"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 426,
columnNumber: 35
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 422,
columnNumber: 19
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 421,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 420,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 419,
columnNumber: 13
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 409,
columnNumber: 11
}, this), _jsxDEV(Library.SectionL3, {
title: "loading",
children: [_jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: "Show a loading spinner. Column headings are still displayed."
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 435,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: `boolean`
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 439,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 438,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "default",
children: _jsxDEV("code", {
children: "false"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 442,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 441,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 434,
columnNumber: 13
}, this), _jsxDEV(Library.Demo, {
withSource: true,
children: _jsxDEV("div", {
className: "w-full h-[250px]",
children: _jsxDEV(Scroll, {
children: _jsxDEV(DataTable, {
title: "Some of Nabokov's novels",
rows: nabokovRows,
columns: nabokovColumns,
loading: true
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 448,
columnNumber: 19
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 447,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 446,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 445,
columnNumber: 13
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 433,
columnNumber: 11
}, this), _jsxDEV(Library.SectionL3, {
title: "renderItem",
children: [_jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: "Callback for formatting the contents of an individual table cell."
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 461,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: `(r: Row, field: keyof Row) => preact.ComponentChildren`
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 466,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 465,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "default",
children: _jsxDEV("code", {
children: `(r: Row, field: keyof Row) => r[field] as ComponentChildren`
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 469,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 468,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 460,
columnNumber: 13
}, this), _jsxDEV(Library.Demo, {
title: "Using renderItem to format table cell contents",
withSource: true,
children: _jsxDEV("div", {
className: "w-full h-[250px]",
children: _jsxDEV(Scroll, {
children: _jsxDEV(DataTable, {
title: "Some of Nabokov's novels and their translated titles",
rows: nabokovRows,
columns: [{
field: 'title',
label: 'Title'
}, {
field: 'translatedTitle',
label: 'Translated As'
}, {
field: 'year',
label: 'Year'
}],
renderItem: (row, field) => {
switch (field) {
case 'title':
return _jsxDEV("i", {
children: row.title
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 490,
columnNumber: 34
}, this);
case 'translatedTitle':
return row.translatedTitle ? _jsxDEV("i", {
children: row.translatedTitle
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 493,
columnNumber: 29
}, this) : 'N/A';
default:
return row[field];
}
}
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 479,
columnNumber: 19
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 478,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 477,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 473,
columnNumber: 13
}, this), _jsxDEV(Library.Code, {
title: "renderItem callback used for this example",
size: "sm",
content: `const renderItem = (row, field) => {
switch (field) {
case 'title':
return <i>{row.title}</i>;
case 'translatedTitle':
return row.translatedTitle ? (
<i>{row.translatedTitle}</i>
) : (
'N/A'
);
default:
return row[field];
}
}`
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 505,
columnNumber: 13
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 459,
columnNumber: 11
}, this), _jsxDEV(Library.SectionL3, {
title: "onSelectRow",
children: [_jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: "Callback invoked when a row is selected (focused or single-clicked)."
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 527,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: `(r: Row) => void`
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 532,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 531,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 526,
columnNumber: 13
}, this), _jsxDEV(Library.Demo, {
title: "DataTable with onSelectRow callback",
withSource: true,
children: _jsxDEV("div", {
className: "space-y-2 w-full",
children: [_jsxDEV("div", {
children: ["Selected row:", ' ', selectedRow ? _jsxDEV("i", {
children: selectedRow.title
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 542,
columnNumber: 34
}, this) : 'None']
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 540,
columnNumber: 17
}, this), _jsxDEV("div", {
className: "w-full h-[250px]",
children: _jsxDEV(Scroll, {
children: _jsxDEV(DataTable, {
title: "Some of Nabokov's novels",
rows: nabokovRows,
columns: nabokovColumns,
selectedRow: selectedRow,
onSelectRow: row => setSelectedRow(row)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 546,
columnNumber: 21
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 545,
columnNumber: 19
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 544,
columnNumber: 17
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 539,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 535,
columnNumber: 13
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 525,
columnNumber: 11
}, this), _jsxDEV(Library.SectionL3, {
title: "onSelectRows",
children: [_jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: "Callback invoked when the selected rows are changed if multi-row selections are enabled by passing the `selectedRows` prop."
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 561,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: `(r: Row[]) => void`
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 566,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 565,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 560,
columnNumber: 13
}, this), _jsxDEV(Library.Demo, {
title: "DataTable with onSelectRows callback",
withSource: true,
children: _jsxDEV("div", {
className: "space-y-2 w-full",
children: [_jsxDEV("div", {
children: ["Selected rows:", ' ', selectedRows.length > 0 ? _jsxDEV("i", {
children: selectedRows.map(r => r.title).join(', ')
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 577,
columnNumber: 21
}, this) : 'None']
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 574,
columnNumber: 17
}, this), _jsxDEV("div", {
className: "w-full h-[250px]",
children: _jsxDEV(Scroll, {
children: _jsxDEV(DataTable, {
title: "Some of Nabokov's novels",
rows: nabokovRows,
columns: nabokovColumns,
selectedRows: selectedRows,
onSelectRows: rows => setSelectedRows(rows)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 584,
columnNumber: 21
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 583,
columnNumber: 19
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 582,
columnNumber: 17
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 573,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 569,
columnNumber: 13
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 559,
columnNumber: 11
}, this), _jsxDEV(Library.SectionL3, {
title: "onConfirmRow",
children: _jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: ["Callback invoked when a row is confirmed (double-clicked, or", ' ', _jsxDEV("kbd", {
children: "enter"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 601,
columnNumber: 17
}, this), " pressed)"]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 599,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: `(r: Row) => void`
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 604,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 603,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 598,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 597,
columnNumber: 11
}, this), _jsxDEV(Library.SectionL3, {
title: "selectedRow",
children: [_jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: ["Set which Row in ", _jsxDEV("code", {
children: "rows"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 612,
columnNumber: 34
}, this), " is currently selected."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 611,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: `Row`
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 615,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 614,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 610,
columnNumber: 13
}, this), _jsxDEV(Library.Demo, {
title: "DataTable with selectedRow",
withSource: true,
children: _jsxDEV("div", {
className: "w-full h-[250px]",
children: _jsxDEV(Scroll, {
children: _jsxDEV(DataTable, {
title: "Some of Nabokov's novels",
rows: nabokovRows,
columns: nabokovColumns,
selectedRow: nabokovRows[2]
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 622,
columnNumber: 19
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 621,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 620,
columnNumber: 15
}, this)
}, void 0, false, {