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