koval-ui
Version:
React components collection with minimalistic design. Supports theming, layout, and input validation.
334 lines (333 loc) • 13 kB
JavaScript
"use client";
import { jsxs as h, jsx as t } from "react/jsx-runtime";
import { forwardRef as Ne, useRef as Te, useMemo as ve, useCallback as z, Fragment as k } from "react";
import O from "classnames";
import { useReactTable as Ae, getFilteredRowModel as He, getSortedRowModel as Le, getPaginationRowModel as Ee, getCoreRowModel as ye, flexRender as b } from "@tanstack/react-table";
import { useLocalTheme as ze } from "css-vars-hook";
import { useResizeObserver as ke } from "../../internal/hooks/useResizeObserverNew.js";
import { useInternalRef as Oe } from "../../internal/hooks/useInternalRef.js";
import { useBrowserLocale as je } from "../../internal/locale/useBrowserLocale.js";
/* empty css */
import { useInternalId as Be } from "../../internal/hooks/useInternalId.js";
import { IconFilterOff as Ve } from "../../internal/Icons/IconFilterOff.js";
import { useColumnFilters as $e } from "./tableFeatures/useColumnFilters.js";
import a from "./DataTable.module.css.js";
import { ProcessingModes as f, RenderModes as s } from "./types.js";
import { useColumnPinning as qe } from "./tableFeatures/useColumnPinning.js";
import { TableCell as S } from "./TableCell.js";
import { useVirtualRows as We } from "./tableFeatures/useVirtualRows.js";
import { useTableData as Ge } from "./tableFeatures/useTableData.js";
import { Pagination as _e } from "./Pagination.js";
import { usePagination as Je } from "./tableFeatures/usePagination.js";
import { useSorting as Ke } from "./tableFeatures/useSorting.js";
import { FilterDialog as Qe } from "./dialogs/FilterDialog.js";
import { useRowSelection as Ue } from "./tableFeatures/useRowSelection.js";
import { useTableHeight as Xe } from "./tableFeatures/useTableHeight.js";
import { DeleteDialog as Ye } from "./dialogs/DeleteDialog.js";
import { EditDialog as Ze } from "./dialogs/EditDialog.js";
import { SelectableActions as et } from "./SelectableActions.js";
import { useEdit as tt } from "./tableFeatures/useEdit.js";
import { useTableColumns as nt } from "./tableFeatures/useTableColumns.js";
import { isInPercentRange as ot, isInDateRange as lt } from "./filterFns.js";
import { Table as it } from "../Text/Table.js";
import { Button as at } from "../Button/Button.js";
import { I as rt } from "../Text/InlineElements.js";
const j = 42, st = 6, mt = {
pageIndex: 0,
pageSize: 10
}, gt = [], ct = [], dt = {}, ut = Ne(
({
children: ht,
className: B,
tableData: V = [],
columnPinning: $,
renderMode: m = s.virtual,
pagination: q = mt,
onPaginationChange: W = () => {
},
onSortingChange: G = () => {
},
onFiltersChange: _ = () => {
},
onRowSelect: J = () => {
},
onEdit: K = () => {
},
rowSelection: Q = dt,
pageCount: U,
sorting: X = gt,
processingMode: c = f.internal,
columnFilters: Y = ct,
locale: Z,
selectable: p = !1,
tableHeight: ee = "full",
caption: C,
columns: te = [],
id: ne,
...oe
}, le) => {
var L, E, y;
const d = Be(ne), { tableData: P, setTableData: ie } = Ge(V), I = Oe(le), F = Te(null), { height: w } = ke(I), { LocalRoot: ae } = ze(), M = Xe({ tableHeightProp: ee }), re = ve(
() => ({
...w && { "table-height": w },
"cell-height": j,
"max-height": M
}),
[M, w]
), { columnPinning: se, setColumnPinning: me } = qe({
columnPinningProp: $,
hasSelectableColumn: p
}), { pagination: N, setPagination: ge, currentPage: ce, setCurrentPage: de, setPageSize: ue } = Je(
{ paginationProp: q, onPaginationChange: W }
), { sorting: he, setSorting: fe } = Ke({ sortingProp: X, onSortingChange: G }), { columnFilters: x, setColumnFilters: pe } = $e({
columnFiltersProp: Y,
onFiltersChange: _
}), Ce = je(), { rowSelection: u, setRowSelection: Re, clearSelection: T } = Ue({
rowSelectionProp: Q,
onRowSelect: J,
processingMode: c
}), { columns: D, editableColumns: be } = nt({
columnsProp: te,
selectable: p
}), o = Ae({
meta: {
locale: Z || Ce,
editModalId: `edit-modal-${d}`,
filterModalId: `filter-modal-${d}`,
deleteModalId: `delete-modal-${d}`
},
data: P,
columns: D,
getCoreRowModel: ye(),
onColumnPinningChange: me,
getPaginationRowModel: m === s.paginated ? Ee() : void 0,
onPaginationChange: m === s.paginated ? ge : void 0,
state: {
pagination: m === s.paginated ? N : void 0,
columnPinning: se,
sorting: he,
columnFilters: x,
rowSelection: u
},
manualPagination: c === f.external,
pageCount: c === f.external ? U : void 0,
getSortedRowModel: Le(),
onSortingChange: fe,
// Disabled until proper implementation
enableMultiSort: !1,
manualSorting: c === f.external,
getFilteredRowModel: He(),
onColumnFiltersChange: pe,
manualFiltering: c === f.external,
enableRowSelection: !0,
onRowSelectionChange: Re,
filterFns: {
isInDateRange: lt,
isInPercentRange: ot
}
}), { rows: R } = o.getRowModel(), { before: v, after: A, virtualRows: Se } = We({
rowsCount: R.length,
scrollRef: F,
overscan: st,
cellHeight: j
}), Pe = z(
({ filter: l, column: e }) => {
var n;
(n = o.getColumn(e)) == null || n.setFilterValue(l);
},
[o]
), we = z(() => {
o.resetColumnFilters();
}, [o]), { handleEdit: xe, handleDelete: De, handleDeleteRequest: Ie, handleEditRequest: Fe } = tt({
rowSelection: u,
onEdit: K,
clearSelection: T,
setTableData: ie,
table: o,
tableData: P,
processingMode: c
}), H = `caption-${d}`;
return /* @__PURE__ */ h(k, { children: [
/* @__PURE__ */ t(
Qe,
{
tableContext: o,
id: (L = o.options.meta) == null ? void 0 : L.filterModalId,
onApplyFiler: Pe,
columnFilters: x
}
),
/* @__PURE__ */ t(
Ze,
{
id: (E = o.options.meta) == null ? void 0 : E.editModalId,
selectionAmount: Object.keys(u).length,
columnsConfig: be,
onEdit: xe
}
),
/* @__PURE__ */ t(
Ye,
{
id: (y = o.options.meta) == null ? void 0 : y.deleteModalId,
selectionAmount: Object.keys(u).length,
onDeleteConfirmation: De
}
),
/* @__PURE__ */ h(ae, { theme: re, className: a.heightContainer, children: [
p && /* @__PURE__ */ t(
et,
{
selectedRows: Object.keys(u).length,
totalRows: o.getPreFilteredRowModel().rows.length,
onDeleteRequest: Ie,
onEditRequest: Fe,
onClear: T
}
),
/* @__PURE__ */ h(
it,
{
"aria-describedby": C && H,
wrapperRef: F,
wrapperClassName: O(a.tableWrapper, {
// Needed to apply calculated height to the table to show small tables properly
[a.paginated]: m === s.paginated,
[a.selectable]: p,
[a.hasCaption]: !!C
}),
...oe,
id: d,
className: O(a.dataTable, B),
ref: I,
children: [
/* @__PURE__ */ t("thead", { className: a.tableHeader, children: o.getHeaderGroups().map((l) => /* @__PURE__ */ t("tr", { children: l.headers.map((e, n, i) => {
const r = n > 0 ? n + 1 : 0, g = n === i.length ? 0 : i.length - (n + 1);
return /* @__PURE__ */ t(
S,
{
as: "th",
leftMargin: e.column.getStart("left") + r,
rightMargin: e.column.getAfter("right") + g,
isPinned: e.column.getIsPinned(),
children: e.isPlaceholder ? null : b(
e.column.columnDef.header,
e.getContext()
)
},
e.id
);
}) }, l.id)) }),
m === s.virtual && /* @__PURE__ */ t("tbody", { children: /* @__PURE__ */ h(k, { children: [
v > 0 && /* @__PURE__ */ t("tr", { children: /* @__PURE__ */ t("td", { colSpan: D.length, style: { height: v } }) }),
Se.map((l) => {
const e = R[l.index];
return /* @__PURE__ */ t(
"tr",
{
style: {
height: `${l.size}px`
},
children: e.getVisibleCells().map((n, i, r) => {
const g = i > 0 ? i + 1 : 0, Me = i === r.length ? 0 : r.length - (i + 1);
return /* @__PURE__ */ t(
S,
{
isHighlighted: !!n.column.getIsSorted(),
as: "td",
leftMargin: n.column.getStart("left") + g,
rightMargin: n.column.getAfter("right") + Me,
isPinned: n.column.getIsPinned(),
children: b(
n.column.columnDef.cell,
n.getContext()
)
},
n.id
);
})
},
e.id
);
}),
A > 0 && /* @__PURE__ */ t("tr", { children: /* @__PURE__ */ t("td", { colSpan: D.length, style: { height: A } }) })
] }) }),
m === s.paginated && /* @__PURE__ */ t("tbody", { children: R.map((l) => /* @__PURE__ */ t("tr", { children: l.getVisibleCells().map((e, n, i) => {
const r = n > 0 ? n + 1 : 0, g = n === i.length ? 0 : i.length - (n + 1);
return /* @__PURE__ */ t(
S,
{
isHighlighted: !!e.column.getIsSorted(),
as: "td",
leftMargin: e.column.getStart("left") + r,
rightMargin: e.column.getAfter("right") + g,
isPinned: e.column.getIsPinned(),
children: b(
e.column.columnDef.cell,
e.getContext()
)
},
e.id
);
}) }, l.id)) }),
R.length === 0 && /* @__PURE__ */ t("tbody", { children: /* @__PURE__ */ t("tr", { className: a.noDataRow, children: /* @__PURE__ */ t(
"td",
{
className: a.noDataCell,
colSpan: o.getAllColumns().length,
children: /* @__PURE__ */ h("div", { className: a.noDataWarning, children: [
/* @__PURE__ */ t("span", { children: "No data to render." }),
x.length > 0 && /* @__PURE__ */ t(
at,
{
onClick: we,
prefix: Ve,
size: "small",
variant: "link",
children: "Reset all filters"
}
)
] })
}
) }) }),
/* @__PURE__ */ t("tfoot", { className: a.tableFooter, children: o.getFooterGroups().map((l) => /* @__PURE__ */ t("tr", { children: l.headers.map((e, n, i) => {
const r = n > 0 ? n + 1 : 0, g = n === i.length ? 0 : i.length - (n + 1);
return /* @__PURE__ */ t(
S,
{
as: "th",
leftMargin: e.column.getStart("left") + r,
rightMargin: e.column.getAfter("right") + g,
isPinned: e.column.getIsPinned(),
children: e.isPlaceholder ? null : b(
e.column.columnDef.footer,
e.getContext()
)
},
e.id
);
}) }, l.id)) })
]
}
),
m === s.paginated && /* @__PURE__ */ t(
_e,
{
rowsCount: P.length,
onPageSizeChange: ue,
currentPage: ce,
pagesAmount: o.getPageCount(),
pageSize: N.pageSize,
setCurrentPage: de
}
),
C && /* @__PURE__ */ t("div", { id: H, className: a.tableCaption, children: /* @__PURE__ */ t(rt, { children: C }) })
] })
] });
}
);
ut.displayName = "DataTable";
export {
ut as DataTable
};
//# sourceMappingURL=DataTable.js.map