@hypothesis/frontend-shared
Version:
Shared components, styles and utilities for Hypothesis projects
65 lines • 2.03 kB
JavaScript
var _jsxFileName = "/home/runner/work/frontend-shared/frontend-shared/src/components/data/Table.tsx";
import classnames from 'classnames';
import { useMemo } from 'preact/hooks';
import { useSyncedRef } from '../../hooks/use-synced-ref';
import { downcastRef } from '../../util/typing';
import TableContext from './TableContext';
import { jsxDEV as _jsxDEV } from "preact/jsx-dev-runtime";
/**
* Render table content
*/
export default function Table({
children,
classes,
elementRef,
title,
interactive = false,
stickyHeader = false,
borderless = false,
striped = true,
grid = false,
...htmlAttributes
}) {
const ref = useSyncedRef(elementRef);
const tableContext = useMemo(() => ({
interactive,
stickyHeader,
borderless,
striped,
grid,
tableRef: ref
}), [interactive, stickyHeader, borderless, striped, grid, ref]);
return _jsxDEV(TableContext.Provider, {
value: tableContext,
children: _jsxDEV("table", {
"data-component": "Table",
...htmlAttributes,
"aria-label": title,
className: classnames('w-full h-full', 'focus-visible-ring ring-inset',
// Set the width of columns based on the width of the columns in the
// first table row (typically headers)
'table-fixed',
// `border-separate` is required to handle borders on sticky headers.
// A side effect is that borders need to be set primarily on table
// cells, not rows
'border-separate border-spacing-0',
// No top border is set here: that border is set by `TableCell`.
// If it is set here, there will be a 1-pixel wiggle in the sticky
// header on scroll
{
'border-x border-b': !borderless
}, classes),
ref: downcastRef(ref),
children: children
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 59,
columnNumber: 7
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 58,
columnNumber: 5
}, this);
}
//# sourceMappingURL=Table.js.map