@trail-ui/react
Version:
427 lines (425 loc) • 17.3 kB
JavaScript
import "../chunk-YXEYLVCG.mjs";
import {
Lozenge
} from "../chunk-5CC46WKN.mjs";
import "../chunk-MPMSSRZJ.mjs";
import {
_Checkbox
} from "../chunk-26XCDXWQ.mjs";
import "../chunk-UMFXFJMC.mjs";
import "../chunk-T6I3VURN.mjs";
import "../chunk-MB7HO5BK.mjs";
import "../chunk-OONAK5GM.mjs";
import {
_Button
} from "../chunk-YXFZGEMT.mjs";
import "../chunk-TKO4O4FF.mjs";
import "../chunk-JT3O22CN.mjs";
import "../chunk-TYIRKX5D.mjs";
import "../chunk-QRPONS6X.mjs";
import "../chunk-ZRD6UURY.mjs";
import "../chunk-2MFMRIOO.mjs";
import "../chunk-6APYGYMC.mjs";
import "../chunk-CTOQKVKR.mjs";
import {
_AvatarGroup
} from "../chunk-STWU4DVS.mjs";
import {
_Avatar
} from "../chunk-OKWXKKQQ.mjs";
import "../chunk-B63AQA6W.mjs";
import "../chunk-AKU6F3WT.mjs";
// src/tanstackGroupTable/tanstackGroupTable.tsx
import {
flexRender,
getCoreRowModel,
getExpandedRowModel,
getPaginationRowModel,
getSortedRowModel,
useReactTable
} from "@tanstack/react-table";
import { ArrowDownIcon, ArrowUpIcon, ChevronLeftIcon, ChevronRightIcon } from "@trail-ui/icons";
import { clsx } from "@trail-ui/shared-utils";
import { useState } from "react";
import { commonColors } from "@trail-ui/theme";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
function TanstackGroupTable({
columns,
data,
tableData,
checkBoxSelectedName,
tableName
}) {
const tableColumns = columns.map((column) => {
return {
id: column.id,
size: column.width,
header: () => {
switch (column.type) {
case "id":
return /* @__PURE__ */ jsx(
"div",
{
className: "text-center",
children: /* @__PURE__ */ jsx(
_Checkbox,
{
"aria-label": `Select All ${tableName}`,
classNames: { control: "mr-0 text-center" },
...{
isSelected: Object.keys(rowSelection).length === data.length,
isIndeterminate: Object.keys(rowSelection).length > 0 && Object.keys(rowSelection).length < data.length,
checked: Object.keys(rowSelection).length === data.length,
onChange: () => {
const allSelected = Object.keys(rowSelection).length === data.length;
const newSelection = allSelected ? {} : data.reduce((acc, row) => {
acc[row.id] = true;
return acc;
}, {});
setRowSelection(newSelection);
}
}
}
)
}
);
default:
return column.name;
}
},
accessorKey: column.accessor,
cell: ({ cell }) => {
switch (column.type) {
case "id":
return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
_Checkbox,
{
"aria-labelledby": `Select ${cell.row.original[checkBoxSelectedName != null ? checkBoxSelectedName : ""]}`,
classNames: { control: "mr-0 text-center" },
...{
isSelected: cell.row.getIsSelected(),
onChange: () => cell.row.toggleSelected()
}
}
) });
case "text":
return cell.getValue();
case "date":
return new Date(cell.getValue()).toLocaleDateString();
case "number":
return cell.getValue();
case "status":
return /* @__PURE__ */ jsx(
Lozenge,
{
size: "sm",
variant: "light",
value: cell.getValue(),
color: cell.getValue() === "Active" ? "green" : cell.getValue() === "Inactive" ? "red" : "yellow"
}
);
case "percentage":
return /* @__PURE__ */ jsx(
Lozenge,
{
size: "sm",
variant: "light",
value: `${cell.getValue()}`,
color: cell.getValue() > 0 ? "green" : cell.getValue() < 0 ? "red" : "yellow"
}
);
case "image":
return /* @__PURE__ */ jsx("figure", { className: "min-w-36", children: /* @__PURE__ */ jsx(
"img",
{
className: "h-10",
src: cell.getValue(),
style: {
objectFit: column.objectFit ? column.objectFit : "cover",
width: column.objectFit === "contain" ? "max-content" : "100%"
},
alt: ""
}
) });
case "username":
return /* @__PURE__ */ jsx("p", { className: "flex items-center gap-1 text-sm text-neutral-900", children: /* @__PURE__ */ jsx(
_Avatar,
{
id: cell.getValue(),
size: "md",
is: "span",
name: cell.getValue(),
getInitials: (name) => name.toUpperCase().slice(0, 2),
showFallback: true,
color: ["green", "red", "yellow", "default", "purple", "blue"][Math.floor(Math.random() * 6)]
}
) });
case "usersList":
return /* @__PURE__ */ jsx(_AvatarGroup, { size: "md", max: 2, children: (cell.getValue() || []).map((user) => /* @__PURE__ */ jsx(
_Avatar,
{
size: "md",
is: "span",
src: user.avatar,
name: user.name,
getInitials: (name) => name.toUpperCase().slice(0, 2),
showFallback: true,
color: ["green", "red", "yellow", "default", "purple", "blue"][Math.floor(Math.random() * 6)]
},
user.id
)) });
default:
return cell.getValue();
}
}
};
});
const [sorting, setSorting] = useState([]);
const [rowSelection, setRowSelection] = useState({});
const [expanded, setExpanded] = useState({});
const table = useReactTable({
enableRowSelection: true,
columns: tableColumns,
data,
// sortDescFirst: true,
// enableSortingRemoval: false,
defaultColumn: {
size: 100
},
getCoreRowModel: getCoreRowModel(),
getSortedRowModel: getSortedRowModel(),
getExpandedRowModel: getExpandedRowModel(),
onRowSelectionChange: setRowSelection,
onSortingChange: setSorting,
onExpandedChange: setExpanded,
getPaginationRowModel: getPaginationRowModel(),
state: {
sorting,
rowSelection,
expanded
},
initialState: {
pagination: {
pageSize: tableData ? tableData : 10,
pageIndex: 0
}
}
});
const currentPage = table.getState().pagination.pageIndex + 1;
const pageCount = table.getPageCount();
const pageNumbers = [];
const maxButtonsToShow = 5;
if (pageCount <= maxButtonsToShow) {
for (let i = 1; i <= pageCount; i++) {
pageNumbers.push(i);
}
} else {
let startPage, endPage;
const middleButtonsToShow = maxButtonsToShow - 2;
const halfMiddleButtonsToShow = Math.floor(middleButtonsToShow / 2);
if (currentPage <= halfMiddleButtonsToShow + 1) {
startPage = 2;
endPage = middleButtonsToShow + 1;
} else if (currentPage + halfMiddleButtonsToShow >= pageCount) {
startPage = pageCount - middleButtonsToShow;
endPage = pageCount - 1;
} else {
startPage = currentPage - halfMiddleButtonsToShow;
endPage = currentPage + halfMiddleButtonsToShow;
}
pageNumbers.push(1);
if (startPage > 2) {
pageNumbers.push("...");
}
for (let i = startPage; i <= endPage; i++) {
pageNumbers.push(i);
}
if (endPage < pageCount - 1) {
pageNumbers.push("...");
}
pageNumbers.push(pageCount);
}
function toggleSort(header) {
const sortingHandler = header.column.getToggleSortingHandler();
if (sortingHandler) {
sortingHandler({ persist: () => {
} });
}
}
return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", { className: "rounded", children: [
/* @__PURE__ */ jsx("div", { className: "h-full overflow-auto rounded border border-neutral-200", children: /* @__PURE__ */ jsx("div", { className: "grid-container", children: /* @__PURE__ */ jsxs("table", { className: "w-full table-auto overflow-x-auto bg-white", children: [
/* @__PURE__ */ jsx("thead", { className: "border-b border-b-neutral-200 text-neutral-600", children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx("tr", { children: headerGroup.headers.map((header) => {
var _a;
return /* @__PURE__ */ jsx(
"th",
{
scope: "col",
colSpan: header.colSpan,
className: `h-10 min-h-10 border-r border-r-neutral-200 bg-neutral-100 p-2 text-sm font-semibold text-neutral-900 first:w-10 first:text-center last:border-r-0`,
children: header.isPlaceholder && header.column.getIndex() === 0 ? null : header.id == "id" ? /* @__PURE__ */ jsx("span", { children: flexRender(header.column.columnDef.header, header.getContext()) }) : /* @__PURE__ */ jsx(
_Button,
{
appearance: "transparent",
className: clsx(
header.column.getCanSort() ? "cursor-pointer select-none" : "",
` 'justify-start' w-full items-center px-0 text-sm font-semibold text-neutral-900`
),
onPress: () => toggleSort(header),
onKeyDown: (event) => {
if (event.key === "Enter" || event.key === " ") {
header.column.getToggleSortingHandler();
}
},
children: /* @__PURE__ */ jsxs("span", { className: `'justify-between' flex w-full items-center gap-4`, children: [
flexRender(header.column.columnDef.header, header.getContext()),
header.column.getCanSort() && header.id !== "id" ? (
// currentSort === header.id
/* @__PURE__ */ jsx("span", { className: "sort-icon", children: (_a = {
asc: /* @__PURE__ */ jsx(
ArrowUpIcon,
{
color: commonColors.neutral[800],
width: 16,
height: 16
}
),
desc: /* @__PURE__ */ jsx(
ArrowDownIcon,
{
color: commonColors.neutral[800],
width: 16,
height: 16
}
)
}[header.column.getIsSorted()]) != null ? _a : null })
) : null
] })
}
)
},
header.id
);
}) }, headerGroup.id)) }),
/* @__PURE__ */ jsx("tbody", { className: "text-neutral-900", children: table.getRowModel().rows.map((row) => /* @__PURE__ */ jsxs(Fragment, { children: [
!row.getIsExpanded() && /* @__PURE__ */ jsxs("tr", { className: "border-b border-b-neutral-200", children: [
/* @__PURE__ */ jsx("td", { className: "h-10 border-b border-l border-b-neutral-200 border-l-neutral-200 px-2 py-2 text-sm font-normal text-neutral-900 first:w-10 first:border-l-0 first:text-center", children: /* @__PURE__ */ jsx(
_Checkbox,
{
"aria-label": "Select textual description issue",
classNames: { control: "m-0" },
...{
isSelected: row.getIsSelected(),
onChange: () => row.toggleSelected()
}
}
) }),
/* @__PURE__ */ jsxs(
"td",
{
className: "border-b border-l border-b-neutral-200 border-l-neutral-200 p-2 px-2 py-2 text-sm font-normal text-neutral-900 first:w-10 first:border-l-0 first:text-center",
colSpan: tableColumns.length,
children: [
" ",
/* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-neutral-900", children: '1. An incomplete textual description "PF Harris" is provided for the logo image link instead of "PF Harris logo" in the header section (4 instances)' })
]
}
)
] }, `${row.id}-expanded`),
/* @__PURE__ */ jsx("tr", { children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx(
"td",
{
className: "border-b border-l border-b-neutral-200 border-l-neutral-200 px-2 py-2 py-2 text-sm text-sm font-normal font-normal text-neutral-900 first:w-10 first:w-10 first:border-l-0 first:text-center first:text-center",
children: flexRender(cell.column.columnDef.cell, cell.getContext())
},
cell.id
)) }, row.id),
/* @__PURE__ */ jsx("tr", { children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx(
"td",
{
className: " first:text-centerpy-2 border-b border-l border-b-neutral-200 border-l-neutral-200 px-2 py-2 text-sm text-sm font-normal font-normal text-neutral-900 first:w-10 first:w-10 first:border-l-0 first:text-center",
children: flexRender(cell.column.columnDef.cell, cell.getContext())
},
cell.id + 1
)) }, row.id + 1),
/* @__PURE__ */ jsx("tr", { children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx(
"td",
{
className: " border-b border-l border-b-neutral-200 border-l-neutral-200 px-2 py-2 py-2 text-sm text-sm font-normal font-normal text-neutral-900 first:w-10 first:w-10 first:border-l-0 first:text-center first:text-center",
children: flexRender(cell.column.columnDef.cell, cell.getContext())
},
cell.id + 2
)) }, row.id + 2),
/* @__PURE__ */ jsx("tr", { children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx(
"td",
{
className: " first:text-centerpy-2 border-b border-l border-b-neutral-200 border-l-neutral-200 px-2 py-2 text-sm text-sm font-normal font-normal text-neutral-900 first:w-10 first:w-10 first:border-l-0 first:text-center",
children: flexRender(cell.column.columnDef.cell, cell.getContext())
},
cell.id + 3
)) }, row.id + 3)
] })) })
] }) }) }),
/* @__PURE__ */ jsxs("div", { className: "mt-2 flex items-center justify-between space-x-2 p-2", children: [
/* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs("p", { className: "text-sm text-neutral-600", children: [
"Showing ",
table.getRowModel().rows.length,
" out of ",
data.length,
" results"
] }) }),
/* @__PURE__ */ jsx("nav", { "aria-label": "Pagination", className: "flex justify-end", children: /* @__PURE__ */ jsxs("ul", { className: "justtify-end flex", children: [
/* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
_Button,
{
"aria-label": "Previous page",
appearance: "transparent",
isDisabled: !table.getCanPreviousPage(),
onPress: () => table.previousPage(),
children: /* @__PURE__ */ jsx(
ChevronLeftIcon,
{
color: `${currentPage === 1 ? "#B0ACBB" : "#302E38"}`,
width: 24,
height: 24
}
)
}
) }),
pageNumbers.map((pageNumber, index) => /* @__PURE__ */ jsx("li", { children: pageNumber === "..." ? /* @__PURE__ */ jsx("span", { children: "..." }) : /* @__PURE__ */ jsx(
"button",
{
...pageNumber === currentPage ? { "aria-current": "page" } : {},
"aria-current": pageNumber === currentPage ? "page" : void 0,
onClick: () => {
if (pageNumber !== "...") {
table.setPageIndex(pageNumber - 1);
}
},
className: `px-3 py-1 text-sm font-normal text-neutral-800 ${pageNumber === currentPage ? "rounded-sm bg-purple-100" : "bg-white"} ${pageNumber !== "..." ? "underline" : ""}`,
children: pageNumber
}
) }, index)),
/* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
_Button,
{
appearance: "transparent",
isDisabled: !table.getCanNextPage(),
onPress: () => table.nextPage(),
"aria-label": "Next page",
children: /* @__PURE__ */ jsx(
ChevronRightIcon,
{
color: !table.getCanNextPage() ? "#B0ACBB" : "#302E38",
width: 24,
height: 24
}
)
}
) })
] }) })
] })
] }) });
}
export {
TanstackGroupTable as default
};