@hitachivantara/uikit-react-core/dist/Table/Table.js

UI Kit Core React components.

import { useClasses } from "./Table.styles.js";
import TableContext from "./TableContext.js";
import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
import { forwardRef, useMemo, useRef } from "react";
import { jsx } from "react/jsx-runtime";
//#region src/Table/Table.tsx
var defaultComponent = "table";
var computeTablePartComponents = (rootComponent) => {
	if (rootComponent === "table") return {
		Table: "table",
		THead: "thead",
		TBody: "tbody",
		Tr: "tr",
		Th: "th",
		Td: "td"
	};
	return {
		Table: rootComponent,
		THead: rootComponent,
		TBody: rootComponent,
		Tr: rootComponent,
		Th: rootComponent,
		Td: rootComponent
	};
};
/**
* A table gathers relational data. It displays values arranged to allow quick numerical analysis like comparison and sorting.
*
* The `HvTable` component offers a set of HTML-equivalent elements, **styled to Design System's specification**,
* for building tables.
* You can rely on these **elements** when your table doesn’t have many interactions or you need it to be very lightweight.
*
* For better data handling and **advanced features** we recommend the use of the utility hooks collection.
* See the [Table Hooks documentation](https://pentaho.github.io/uikit-docs/master/components/table#usehvtable-hooks) for more details.
*/
var HvTable = forwardRef(function HvTable(props, ref) {
	const { classes: classesProp, className, component = defaultComponent, stickyHeader = false, stickyColumns = false, variant = "default", ...others } = useDefaultProps("HvTable", props);
	const { classes, cx } = useClasses(classesProp);
	const containerRef = useRef(ref);
	const components = useMemo(() => computeTablePartComponents(component), [component]);
	const tableContext = useMemo(() => ({
		components,
		variant,
		containerRef
	}), [
		components,
		variant,
		containerRef
	]);
	const Table = useMemo(() => components.Table, [components]);
	return /* @__PURE__ */ jsx(TableContext.Provider, {
		value: tableContext,
		children: /* @__PURE__ */ jsx(Table, {
			ref,
			role: component === defaultComponent ? null : "table",
			className: cx(classes.root, {
				[classes.stickyHeader]: stickyHeader,
				[classes.stickyColumns]: stickyColumns,
				[classes.listRow]: variant === "listrow"
			}, className),
			...others
		})
	});
});
//#endregion
export { HvTable };