@veracity/vui/dist/table/table.js

Veracity UI is a React component library crafted for use within Veracity applications and pages. Based on Styled Components and @xstyled.

import { compareBy } from "../utils/array.js";
import { cs } from "../utils/styles.js";
import { useStyleConfig } from "../core/theme.js";
import styled, { css } from "../core/styled.js";
import vui from "../core/vui.js";
import { TableProvider } from "./context.js";
import { TableSortIcon } from "./tableSortIcon.js";
import { Td } from "./td.js";
import { Tr } from "./tr.js";
import { Tbody } from "./tbody.js";
import { Tfoot } from "./tfoot.js";
import { Th } from "./th.js";
import { Thead } from "./thead.js";
import useTable from "./useTable.js";
import { useMemo } from "react";
import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";

//#region src/table/table.tsx
/**
* Displays a Table with support for columns, rows and sort.
*/
const TableBase = styled.tableBox`
  border-collapse: separate;
  border-spacing: 0px;
  display: table;
  position: relative;
  width: 100%;

  ${(p) => p.stickyColumn && css`
      thead tr:last-of-type th:first-of-type,
      td:first-of-type {
        left: 0;
        position: sticky;
        z-index: 2;

        ::after {
          bottom: -1px;
          box-shadow: inset 10px 0 8px -8px #00000026;
          content: '';
          pointer-events: none;
          position: absolute;
          right: 0;
          top: 0;
          transform: translate(100%);
          transition: box-shadow 0.3s;
          width: 10px;
        }
      }

      thead tr:last-of-type th:first-of-type:not([data-active='true']):not([data-disabled='true']),
      td:first-of-type {
        background-color: white;
      }
    `}
`;
/** Displays a Table with support for columns, rows and sort. */
const Table = vui((props, ref) => {
	const { children, className, columns, defaultSort, onSortChange, rows, size, sort: sortProp, stickyColumn, stickyHeader, variant, ...rest } = props;
	const styles = useStyleConfig("Table", props);
	const tableProps = useTable({
		defaultSort,
		onSortChange,
		sort: sortProp
	});
	const { isControlled, sort } = tableProps;
	const sortedRows = useMemo(() => !isControlled ? rows?.slice().sort(compareBy(sort.key, sort.order)) : rows, [
		rows,
		sort,
		isControlled
	]);
	const context = {
		...tableProps,
		columns,
		rows: sortedRows,
		size,
		stickyColumn,
		stickyHeader,
		variant
	};
	return /* @__PURE__ */ jsx(TableProvider, {
		value: context,
		children: /* @__PURE__ */ jsx(TableBase, {
			className: cs("vui-table", className),
			ref,
			stickyColumn,
			...styles.container,
			...rest,
			children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Thead, {}), /* @__PURE__ */ jsx(Tbody, {})] })
		})
	});
});
Table.SortIcon = TableSortIcon;
Table.Tbody = Tbody;
Table.Td = Td;
Table.Tfoot = Tfoot;
Table.Th = Th;
Table.Thead = Thead;
Table.Tr = Tr;
Table.displayName = "Table";

//#endregion
export { Table, Table as default, TableBase };
globalThis.__vuiVersion__ = "5.3.1"
//# sourceMappingURL=table.js.map