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