@hugo-lml/hr-net-table
Version:
Custom Table from HRnet OC project
154 lines • 5.67 kB
JavaScript
// src/CustomTable.tsx
import { useMemo, useState } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
var CustomTable = ({
data,
columns
}) => {
const [sortKey, setSortKey] = useState(null);
const [sortDirection, setSortDirection] = useState("asc");
const [rowsPerPage, setRowsPerPage] = useState(10);
const [currentPage, setCurrentPage] = useState(1);
const [searchQuery, setSearchQuery] = useState("");
const filteredData = useMemo(() => {
if (!searchQuery) return data;
return data.filter(
(row) => columns.some((col) => {
const cellValue = row[col.key];
if (cellValue instanceof Date) {
return new Intl.DateTimeFormat("en-us").format(cellValue).toLowerCase().includes(searchQuery.toLowerCase());
}
return String(cellValue).toLowerCase().includes(searchQuery.toLowerCase());
})
);
}, [data, columns, searchQuery]);
const sortedData = useMemo(() => {
if (!sortKey) return filteredData;
return [...filteredData].sort((a, b) => {
const aValue = a[sortKey];
const bValue = b[sortKey];
if (aValue instanceof Date || bValue instanceof Date) {
return sortDirection === "asc" ? new Date(aValue).getTime() - new Date(bValue).getTime() : new Date(bValue).getTime() - new Date(aValue).getTime();
}
return sortDirection === "asc" ? String(aValue).localeCompare(String(bValue)) : String(bValue).localeCompare(String(aValue));
});
}, [filteredData, sortKey, sortDirection]);
const paginatedData = useMemo(() => {
const startIndex = (currentPage - 1) * rowsPerPage;
return sortedData.slice(startIndex, startIndex + rowsPerPage);
}, [sortedData, currentPage, rowsPerPage]);
const totalPages = Math.ceil(filteredData.length / rowsPerPage);
const handleSort = (key) => {
if (sortKey === key) {
setSortDirection(sortDirection === "asc" ? "desc" : "asc");
} else {
setSortKey(key);
setSortDirection("asc");
}
};
const handlePageChange = (page) => {
if (page < 1 || page > totalPages) return;
setCurrentPage(page);
};
const handleRowsPerPageChange = (event) => {
setRowsPerPage(Number(event.target.value));
setCurrentPage(1);
};
const handleSearchChange = (event) => {
setSearchQuery(event.target.value);
setCurrentPage(1);
};
if (data.length === 0) return /* @__PURE__ */ jsx("p", { children: "No data to show" });
return /* @__PURE__ */ jsxs("div", { className: "custom-table-wrapper", children: [
/* @__PURE__ */ jsxs("div", { className: "custom-table-filter", children: [
/* @__PURE__ */ jsxs("label", { htmlFor: "rowsPerPage", children: [
"Show",
/* @__PURE__ */ jsx(
"select",
{
id: "rowsPerPage",
value: rowsPerPage,
onChange: handleRowsPerPageChange,
children: [10, 25, 50, 100].map((size) => /* @__PURE__ */ jsx("option", { value: size, children: size }, size))
}
),
"entries"
] }),
/* @__PURE__ */ jsxs("div", { children: [
/* @__PURE__ */ jsx("label", { htmlFor: "search", children: "Search:" }),
/* @__PURE__ */ jsx(
"input",
{
id: "search",
type: "text",
value: searchQuery,
onChange: handleSearchChange,
placeholder: "type to search..."
}
)
] })
] }),
/* @__PURE__ */ jsxs("table", { className: "custom-table", children: [
/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { children: columns.map((column) => /* @__PURE__ */ jsx(
"th",
{
onClick: () => column.sortable && handleSort(column.key),
children: /* @__PURE__ */ jsxs("div", { children: [
column.label,
column.sortable && /* @__PURE__ */ jsx(
"span",
{
className: `custom-table-sort-icon ${sortKey === column.key ? "custom-table-sort-active" : ""}`,
children: sortDirection === "asc" ? "\u25B2" : "\u25BC"
}
)
] })
},
String(column.key)
)) }) }),
/* @__PURE__ */ jsx("tbody", { children: paginatedData.map((row, index) => /* @__PURE__ */ jsx("tr", { children: columns.map((column) => /* @__PURE__ */ jsx("td", { children: row[column.key] instanceof Date ? new Intl.DateTimeFormat("en-us").format(
new Date(row[column.key])
) : String(row[column.key]) }, String(column.key))) }, index)) })
] }),
/* @__PURE__ */ jsxs("div", { className: "custom-table-pagination", children: [
/* @__PURE__ */ jsxs("span", { children: [
"Showing ",
(currentPage - 1) * rowsPerPage + 1,
" to",
" ",
Math.min(currentPage * rowsPerPage, filteredData.length),
" of",
" ",
filteredData.length,
" entries"
] }),
/* @__PURE__ */ jsxs("div", { children: [
"Page ",
currentPage,
" of ",
totalPages,
/* @__PURE__ */ jsx(
"button",
{
onClick: () => handlePageChange(currentPage - 1),
disabled: currentPage === 1,
children: "Previous"
}
),
/* @__PURE__ */ jsx(
"button",
{
onClick: () => handlePageChange(currentPage + 1),
disabled: currentPage === totalPages,
children: "Next"
}
)
] })
] })
] });
};
var CustomTable_default = CustomTable;
export {
CustomTable_default as CustomTable
};
//# sourceMappingURL=index.mjs.map