@heroui/table
Version:
Tables are used to display tabular data using rows and columns.
139 lines (136 loc) • 4.24 kB
JavaScript
"use client";
import {
virtualized_table_default
} from "./chunk-V3AP7XKU.mjs";
import {
table_select_all_checkbox_default
} from "./chunk-67GXY34O.mjs";
import {
useTable
} from "./chunk-P5A2WWO7.mjs";
import {
table_body_default
} from "./chunk-4F2KGF2R.mjs";
import {
table_column_header_default
} from "./chunk-2DJ3C564.mjs";
import {
table_header_row_default
} from "./chunk-IHYE3VZ6.mjs";
import {
table_row_group_default
} from "./chunk-ZHG476YD.mjs";
// src/table.tsx
import { useCallback } from "react";
import { forwardRef } from "@heroui/system";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
var Table = forwardRef((props, ref) => {
const {
BaseComponent,
Component,
collection,
values,
topContent,
topContentPlacement,
bottomContentPlacement,
bottomContent,
removeWrapper,
sortIcon,
getBaseProps,
getWrapperProps,
getTableProps
} = useTable({
...props,
ref
});
const { isVirtualized, rowHeight = 40, maxTableHeight = 600 } = props;
const shouldVirtualize = isVirtualized;
const Wrapper = useCallback(
({ children }) => {
if (removeWrapper) {
return children;
}
return /* @__PURE__ */ jsx(BaseComponent, { ...getWrapperProps(), children });
},
[removeWrapper, getWrapperProps]
);
if (shouldVirtualize) {
return /* @__PURE__ */ jsx(
virtualized_table_default,
{
...props,
ref,
maxTableHeight,
rowHeight
}
);
}
return /* @__PURE__ */ jsxs("div", { ...getBaseProps(), children: [
topContentPlacement === "outside" && topContent,
/* @__PURE__ */ jsx(Wrapper, { children: /* @__PURE__ */ jsxs(Fragment, { children: [
topContentPlacement === "inside" && topContent,
/* @__PURE__ */ jsxs(Component, { ...getTableProps(), children: [
/* @__PURE__ */ jsx(table_row_group_default, { classNames: values.classNames, slots: values.slots, children: collection.headerRows.map((headerRow) => /* @__PURE__ */ jsx(
table_header_row_default,
{
classNames: values.classNames,
node: headerRow,
slots: values.slots,
state: values.state,
children: [...headerRow.childNodes].map(
(column) => {
var _a;
return ((_a = column == null ? void 0 : column.props) == null ? void 0 : _a.isSelectionCell) ? /* @__PURE__ */ jsx(
table_select_all_checkbox_default,
{
checkboxesProps: values.checkboxesProps,
classNames: values.classNames,
color: values.color,
disableAnimation: values.disableAnimation,
node: column,
selectionMode: values.selectionMode,
slots: values.slots,
state: values.state
},
column == null ? void 0 : column.key
) : /* @__PURE__ */ jsx(
table_column_header_default,
{
classNames: values.classNames,
node: column,
slots: values.slots,
sortIcon,
state: values.state
},
column == null ? void 0 : column.key
);
}
)
},
headerRow == null ? void 0 : headerRow.key
)) }),
/* @__PURE__ */ jsx(
table_body_default,
{
checkboxesProps: values.checkboxesProps,
classNames: values.classNames,
collection: values.collection,
color: values.color,
disableAnimation: values.disableAnimation,
isSelectable: values.isSelectable,
selectionMode: values.selectionMode,
slots: values.slots,
state: values.state
}
)
] }),
bottomContentPlacement === "inside" && bottomContent
] }) }),
bottomContentPlacement === "outside" && bottomContent
] });
});
Table.displayName = "HeroUI.Table";
var table_default = Table;
export {
table_default
};