react-dynamiq-table
Version:
this is react dynamic table help you to avoide repeating yourself. it's very easy to customize the style and access your data dynamically without mapping
654 lines (628 loc) • 35 kB
JavaScript
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
import { createElement } from 'react';
const PaginationBase = ({ children, baseProps }) => {
return (jsx("div", { ...(baseProps
? {
...baseProps,
...(baseProps.className
? {
className: `flex flex-col md:flex-row justify-between items-start md:items-center space-y-3 md:space-y-0 p-4 bg-white ${baseProps.className}`,
}
: {
className: `flex flex-col md:flex-row justify-between items-start md:items-center space-y-3 md:space-y-0 p-4 bg-white`,
}),
}
: {
className: `flex flex-col md:flex-row justify-between items-start md:items-center space-y-3 md:space-y-0 p-4 bg-white`,
}), children: children }));
};
const PaginationLeftBase = ({ children, leftBaseProps, }) => {
return (jsx("div", { ...(leftBaseProps
? {
...leftBaseProps,
...(leftBaseProps.className
? {
className: `flex items-center gap-x-3 ${leftBaseProps.className}`,
}
: {
className: `flex items-center gap-x-3`,
}),
}
: {
className: `flex items-center gap-x-3`,
}), children: children }));
};
const PaginationRightBase = ({ children, rightBaseProps, }) => {
return (jsx("ul", { ...(rightBaseProps
? {
...rightBaseProps,
...(rightBaseProps.className
? {
className: `inline-flex items-stretch -space-x-px" ${rightBaseProps.className}`,
}
: {
className: `inline-flex items-stretch -space-x-px"`,
}),
}
: {
className: `inline-flex items-stretch -space-x-px"`,
}), children: children }));
};
const PaginationController = ({ pagination }) => {
return (jsxs(PaginationBase, { baseProps: pagination?.baseProps, children: [jsxs(PaginationLeftBase, { leftBaseProps: pagination?.leftBaseProps, children: [jsxs("span", { className: "text-sm font-normal text-gray-500", children: ["Showing", jsxs("span", { className: "font-semibold text-gray-900", children: [pagination?.page || 1, "-", pagination?.totalPages || 0] }), "of", jsx("span", { className: "font-semibold text-gray-900", children: pagination?.totalPages })] }), pagination.per_pageComponent] }), jsxs(PaginationRightBase, { rightBaseProps: pagination?.rightBaseProps, children: [jsx("li", { children: jsxs("button", { onClick: () => {
pagination.handlePageChange(pagination.page - 1);
}, disabled: pagination?.page <= 1, className: "flex items-center justify-center h-full py-1.5 px-3 cursor-pointer disabled:cursor-not-allowed ml-0 text-gray-500 bg-white rounded-l-lg border border-gray-300 hover:bg-gray-100 hover:text-gray-700", children: [jsx("span", { className: "sr-only", children: "Previous" }), jsx("svg", { className: "w-5 h-5", "aria-hidden": "true", fill: "currentColor", viewBox: "0 0 20 20", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { fillRule: "evenodd", d: "M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z", clipRule: "evenodd" }) })] }) }), pagination?.totalPages <= 5 ? (Array.from({ length: pagination?.totalPages }, (_, index) => (jsx("li", { onClick: () => {
pagination.handlePageChange(index + 1);
}, className: "cursor-pointer", children: jsx("span", { className: `flex items-center justify-center text-sm py-2 px-3 leading-tight ${index + 1 === pagination.page
? "bg-gray-300"
: "text-gray-500 bg-white border border-gray-300 hover:bg-gray-100"}`, children: index + 1 }) }, index)))) : (jsxs(Fragment, { children: [jsx("li", { onClick: () => {
pagination.handlePageChange(1);
}, className: "cursor-pointer", children: jsx("span", { className: `flex items-center justify-center text-sm py-2 px-3 leading-tight ${pagination?.page === 1
? "bg-gray-300"
: "text-gray-500 bg-white border border-gray-300 hover:bg-gray-100"}`, children: "1" }) }), pagination?.page > 3 && (jsx("li", { onClick: () => {
pagination.handlePageChange(pagination.page - 1);
}, className: "cursor-pointer", children: jsx("span", { className: "flex items-center justify-center text-sm py-2 px-3 leading-tight text-gray-500 bg-white border border-gray-300", children: "..." }) })), Array.from({ length: 3 }, (_, i) => (jsx("li", { onClick: () => {
pagination.handlePageChange(pagination?.page - 1 + i);
}, className: "cursor-pointer", children: pagination?.page - 1 + i > 1 &&
pagination?.page - 1 + i < pagination?.totalPages && (jsx("span", { className: `flex items-center justify-center text-sm py-2 px-3 leading-tight ${pagination?.page === pagination?.page - 1 + i
? "bg-gray-300"
: "text-gray-500 bg-white border border-gray-300 hover:bg-gray-100"}`, children: pagination?.page - 1 + i })) }, pagination?.page - 1 + i))), pagination?.page < pagination?.totalPages - 2 && (jsx("li", { onClick: () => {
pagination.handlePageChange(pagination.page + 1);
}, className: "cursor-pointer", children: jsx("span", { className: "flex items-center justify-center text-sm py-2 px-3 leading-tight text-gray-500 bg-white border border-gray-300", children: "..." }) })), jsx("li", { onClick: () => {
pagination.handlePageChange(pagination?.totalPages || 0);
}, className: "cursor-pointer", children: jsx("span", { className: `flex items-center justify-center text-sm py-2 px-3 leading-tight ${pagination?.page === pagination?.totalPages
? "bg-gray-300"
: "text-gray-500 bg-white border border-gray-300 hover:bg-gray-100"}`, children: pagination?.totalPages }) })] })), jsx("li", { children: jsxs("button", { onClick: () => {
pagination.handlePageChange(pagination.page + 1);
}, disabled: pagination?.page >= pagination?.totalPages, className: "flex items-center justify-center h-full py-1.5 px-3 cursor-pointer disabled:cursor-not-allowed leading-tight text-gray-500 bg-white rounded-r-lg border border-gray-300 hover:bg-gray-100 hover:text-gray-700", children: [jsx("span", { className: "sr-only", children: "Next" }), jsx("svg", { className: "w-5 h-5", "aria-hidden": "true", fill: "currentColor", viewBox: "0 0 20 20", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { fillRule: "evenodd", d: "M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z", clipRule: "evenodd" }) })] }) })] })] }));
};
function getNestedValue(obj, path) {
const keys = path?.split(".");
const resultValue = keys?.reduce((acc, key) => {
return acc && acc[key] !== undefined ? acc[key] : undefined;
}, obj);
if (typeof resultValue === "number") {
return Number(resultValue);
}
return resultValue?.toString();
}
function handlePropsDynamic(props, item) {
try {
const resultObj = {};
Object.entries(props).forEach(([key, value]) => {
if (typeof value === "string") {
let newValue = value;
const expressionRegex = /\{([^{}]+?)\}/g;
let match;
while ((match = expressionRegex.exec(newValue)) !== null) {
const expression = match[1];
const evaluatedResult = evaluateTernaryExpression(expression, item);
newValue = newValue.replace(match[0], evaluatedResult);
}
const pathRegex = /\[([^\]]+)\]/g;
while ((match = pathRegex.exec(newValue)) !== null) {
const path = match[1];
const evaluatedPath = getNestedValue(item, path);
newValue = newValue.replace(match[0], evaluatedPath);
}
resultObj[key] = newValue;
}
else {
resultObj[key] = value;
}
});
return resultObj;
}
catch (error) {
return {};
}
}
function evaluateTernaryExpression(expression, item) {
try {
const dynamicPathRegex = /\[([^\]]+)\]/g;
let evaluatedExpression = expression;
let match;
while ((match = dynamicPathRegex.exec(expression)) !== null) {
const dynamicPath = match[1];
const dynamicValue = getNestedValue(item, dynamicPath);
evaluatedExpression = evaluatedExpression.replace(match[0], JSON.stringify(dynamicValue));
}
const result = new Function("item", `
with (item) {
return ${evaluatedExpression}; // The ternary condition itself
}
`)(item);
return result;
}
catch (error) {
return expression;
}
}
function generateDynamicLink(href, item) {
const regex = /\[([^\]]+)\]/g;
return href.replace(regex, (_, key) => {
const keys = key.split(".");
let value = item;
for (let k of keys) {
value = value && value[k];
}
return value || "";
});
}
function handleJoined(column, item) {
const joinedValues = column?.join?.map((path) => {
return getNestedValue(item, path) || "";
});
return joinedValues?.join(" ")?.trim();
}
async function handleOptionChnage(value, apiLink, onRes, onCatch, data) {
try {
const bodyData = {
item: data,
value: value,
};
const res = await fetch(apiLink, {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(bodyData),
});
if (res.ok) {
if (onRes) {
onRes([]);
}
}
}
catch (error) {
if (onCatch) {
onCatch(error);
}
}
}
function findTrueContion(column, item) {
const findTrueColumn = column?.condtions?.find((condi) => {
if (typeof condi.condtion === "boolean") {
return condi.condtion === true;
}
if (Array.isArray(condi.condtion.compare)) {
const [getFirstValue, getSecondValue] = condi.condtion.compare;
let firstValue = getFirstValue;
if (getFirstValue?.startsWith("[")) {
firstValue = getFirstValue?.slice(1, -1);
firstValue = getNestedValue(item, firstValue);
}
let secondValue = getSecondValue;
if (getSecondValue?.startsWith("[")) {
secondValue = getSecondValue?.slice(1, -1);
secondValue = getNestedValue(item, secondValue);
}
if (secondValue !== undefined) {
return firstValue === secondValue;
}
return (firstValue !== undefined &&
firstValue !== null &&
firstValue !== "" &&
firstValue !== "undefined");
}
return false;
});
return findTrueColumn;
}
const Chip = ({ className, item }) => {
return (jsx("span", { ...(className
? {
...handlePropsDynamic({
className: `${className} inline-flex w-2 h-2 rounded-full`,
}, item),
...(className
? {}
: {
className: `${className} inline-flex w-2 h-2 rounded-full text-red-700 bg-red-500`,
}),
}
: {
className: `${className} inline-flex w-2 h-2 rounded-full text-red-700 bg-red-500`,
}) }));
};
const TopContentBase = ({ children, baseProps }) => {
return (jsx("div", { ...(baseProps
? {
...baseProps,
...(baseProps.className
? {
className: `flex flex-col md:flex-row items-center justify-between py-2 px-5 bg-white ${baseProps.className}`,
}
: {
className: `flex flex-col md:flex-row items-center justify-between py-2 px-5 bg-white`,
}),
}
: {
className: `flex flex-col md:flex-row items-center justify-between py-2 px-5 bg-white`,
}), children: children }));
};
const TopContentLeftBase = ({ children, leftBaseProps, }) => {
return (jsx("div", { ...(leftBaseProps
? {
...leftBaseProps,
...(leftBaseProps.className
? {
className: `w-full md:w-1/2 ${leftBaseProps.className}`,
}
: {
className: `w-full md:w-1/2`,
}),
}
: {
className: `w-full md:w-1/2`,
}), children: children }));
};
const TopContentMoreComponentBase = ({ children, moreComponentBaseProps, }) => {
return (jsx("div", { ...(moreComponentBaseProps
? {
...moreComponentBaseProps,
...(moreComponentBaseProps.className
? {
className: `flex items-center space-x-3 w-full md:w-auto ${moreComponentBaseProps.className}`,
}
: {
className: `flex items-center space-x-3 w-full md:w-auto`,
}),
}
: {
className: `flex items-center space-x-3 w-full md:w-auto`,
}), children: children }));
};
const TopContentRightBase = ({ children, rightBaseProps, }) => {
return (jsx("div", { ...(rightBaseProps
? {
...rightBaseProps,
...(rightBaseProps.className
? {
className: `w-full md:w-auto flex flex-col md:flex-row items-stretch md:items-center justify-end flex-shrink-0 ${rightBaseProps.className}`,
}
: {
className: `w-full md:w-auto flex flex-col md:flex-row items-stretch md:items-center justify-end flex-shrink-0`,
}),
}
: {
className: `w-full md:w-auto flex flex-col md:flex-row items-stretch md:items-center justify-end flex-shrink-0`,
}), children: children }));
};
const TableTopContent = ({ searchInput, addButton, moreComponents, baseProps, leftBaseProps, rightBaseProps, moreComponentBaseProps, }) => {
return (jsxs(TopContentBase, { baseProps: baseProps, children: [jsx(TopContentLeftBase, { leftBaseProps: leftBaseProps, children: jsxs("form", { className: "flex items-center", children: [jsx("label", { htmlFor: "simple-search", className: "sr-only", children: "Search Input For The Table" }), jsxs("div", { className: "relative w-full", children: [jsx("div", { className: "absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none", children: jsx("svg", { "aria-hidden": "true", className: "w-5 h-5 text-gray-500", fill: "currentColor", viewBox: "0 0 20 20", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { fillRule: "evenodd", d: "M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z", clipRule: "evenodd" }) }) }), jsx("input", { ...(searchInput
? {
...searchInput,
...(searchInput?.className
? {
className: `${searchInput?.className} bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg block w-full pl-10 p-2`,
}
: {
className: "bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg block w-full pl-10 p-2",
}),
...(searchInput?.placeholder
? {}
: { placeholder: "Search" }),
...(searchInput?.type ? {} : { type: "text" }),
...(searchInput?.id ? {} : { id: "simple-search-input" }),
}
: {
type: "text",
id: "simple-search",
placeholder: "Search",
className: "bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg block w-full pl-10 p-2",
}) })] })] }) }), jsxs(TopContentRightBase, { rightBaseProps: rightBaseProps, children: [jsxs("button", { ...(addButton
? {
...addButton,
...(addButton?.className
? {
className: `${addButton?.className} flex items-center justify-center text-white bg-black focus:ring-4 font-medium rounded-lg text-sm px-4 py-2`,
}
: {
className: "flex items-center justify-center text-white bg-black focus:ring-4 font-medium rounded-lg text-sm px-4 py-2",
}),
}
: {
type: "button",
className: "flex items-center justify-center text-white bg-black focus:ring-4 font-medium rounded-lg text-sm px-4 py-2",
}), children: [addButton?.startContent || "", addButton?.title || "", addButton?.endContent || ""] }), moreComponents && (jsx(TopContentMoreComponentBase, { moreComponentBaseProps: moreComponentBaseProps, children: moreComponents }))] })] }));
};
const Td = ({ column, item, colIndex, children, }) => {
return (createElement("td", { ...(column?.normalProps?.td
? {
...handlePropsDynamic(column.normalProps.td, item),
...(column.normalProps.td?.className
? {
className: `${column.normalProps?.td?.className} px-2 py-4 capitalize font-medium text-gray-900 whitespace-nowrap`,
}
: {
className: "px-2 py-4 capitalize font-medium text-gray-900 whitespace-nowrap",
}),
}
: {
className: "px-2 py-4 capitalize font-medium text-gray-900 whitespace-nowrap",
}), key: colIndex, scope: "row" }, children));
};
const ActionTd = ({ column, item, colIndex, children, onClick, adJustClass, }) => {
return (createElement("td", { onClick: onClick, ...(column?.normalProps?.td
? {
...handlePropsDynamic(column.normalProps.td, item),
...(column.normalProps.td?.className
? {
className: `${column.normalProps?.td?.className} flex items-center justify-end px-2 py-4 font-medium text-gray-900 whitespace-nowrap ${adJustClass} `,
}
: {
className: `${adJustClass} flex items-center justify-end px-2 py-4 font-medium text-gray-900 whitespace-nowrap`,
}),
}
: {
className: `${adJustClass} flex items-center justify-end px-2 py-4 font-medium text-gray-900 whitespace-nowrap`,
}), key: colIndex }, children));
};
const Link = ({ item, href, children }) => {
const handleHref = generateDynamicLink(href, item);
return jsx("a", { href: handleHref, children: children });
};
function renderValue(column, item) {
if (Array.isArray(column.join)) {
if (column.useChip) {
return (jsxs(Fragment, { children: [jsx(Chip, { className: column?.chipOptions?.className, item: item }), " ", handleJoined(column, item)] }));
}
return handleJoined(column, item);
}
else {
const value = getNestedValue(item, column?.accessor);
if (column.static) {
if (column.useChip) {
return (jsxs(Fragment, { children: [jsx(Chip, { className: column?.chipOptions?.className, item: item }), " ", column.static] }));
}
return column.static;
}
if (column.useDate) {
if (column.useChip) {
return (jsxs(Fragment, { children: [jsx(Chip, { className: column?.chipOptions?.className, item: item }), " ", new Date(value).toLocaleString()] }));
}
return new Date(value).toLocaleString();
}
else {
if (column.useChip) {
return (jsxs(Fragment, { children: [jsx(Chip, { className: column?.chipOptions?.className, item: item }), " ", value] }));
}
return value;
}
}
}
function handleAction(column, colIndex, item) {
// if (column.actionOptions.useOptions) {
// return (
// <ActionTd
// column={column}
// item={item}
// colIndex={colIndex}
// adJustClass="relative"
// >
// <button
// className="inline-flex items-center p-0.5 text-sm font-medium text-center text-gray-500 hover:text-gray-800 rounded-lg focus:outline-none"
// type="button"
// onClick={() => toggleDropdown(index)}
// >
// {column.actionOptions.optionText ? (
// column.actionOptions.optionText
// ) : (
// <svg
// className="w-5 h-5"
// aria-hidden="true"
// fill="currentColor"
// viewBox="0 0 20 20"
// xmlns="http://www.w3.org/2000/svg"
// >
// <path d="M6 10a2 2 0 11-4 0 2 2 0 014 0zM12 10a2 2 0 11-4 0 2 2 0 014 0zM16 12a2 2 0 100-4 2 2 0 000 4z" />
// </svg>
// )}
// </button>
// {column?.actionOptions?.compo ? column?.actionOptions?.compo(item) : ""}
// <ul
// className={`${
// !openDropdowns[index] && "hidden"
// } py-1 w-44 text-sm text-gray-700 absolute z-30 right-[5%] top-full bg-white rounded divide-y divide-gray-100 shadow`}
// aria-labelledby="apple-imac-27-dropdown-button"
// >
// {column.actionOptions.options.map((ActionOptions) => {
// if (ActionOptions.useLink) {
// return (
// <Li className="block py-2 px-4 hover:bg-gray-100">
// <Link href={ActionOptions.linkOptions.href} item={item}>
// {ActionOptions.componenet}
// </Link>
// </Li>
// );
// }
// return (
// <Li
// className="py-2 px-4 hover:bg-gray-100"
// onClick={() => {
// if (ActionOptions.onClick) {
// ActionOptions.onClick(item);
// }
// }}
// >
// <span>{ActionOptions.componenet}</span>
// </Li>
// );
// })}
// </ul>
// </ActionTd>
// );
// }
return (jsx(Fragment, { children: jsx(ActionTd, { column: column, item: item, colIndex: colIndex, children: column?.actionOptions?.components
? column?.actionOptions?.components(item)
: "" }) }));
}
function celValue(column, colIndex, item) {
if (column.useOption) {
return (jsx(Fragment, { children: jsx(Td, { column: column, item: item, colIndex: colIndex, children: column?.optionOptions?.component ? (jsxs("div", { className: "flex items-center gap-x-3", children: [column.useChip && (jsx(Chip, { item: item, className: column?.chipOptions?.className })), column.optionOptions.component(item)] })) : column?.optionOptions?.apiLink ? (jsx("select", { onChange: (event) => {
handleOptionChnage(event.target.value, column?.optionOptions?.apiLink, column?.optionOptions?.onRes, column?.optionOptions?.onCatch, item);
}, children: column?.optionOptions?.data?.map((value) => (jsx("option", { value: value, children: value }))) })) : (jsx("select", { onChange: (event) => {
if (column?.optionOptions?.onChange) {
column?.optionOptions?.onChange(event.target.value);
}
}, children: column?.optionOptions?.data?.map((value) => (jsx("option", { value: value, children: value }))) })) }, colIndex) }));
}
if (column.useLink) {
return (jsx(Fragment, { children: jsx(Td, { column: column, item: item, colIndex: colIndex, children: jsx(Link, { href: column?.linkOptions?.href, item: item, children: renderValue(column, item) }) }, colIndex) }));
}
if (column.useAction) {
return handleAction(column, colIndex, item);
}
if (column.static) {
return (jsx(Fragment, { children: jsx(Td, { column: column, item: item, colIndex: colIndex, children: renderValue(column, item) }, colIndex) }));
}
return (jsx(Td, { column: column, item: item, colIndex: colIndex, children: renderValue(column, item) }, colIndex));
}
function renderTopContent(topContent, topContentOptions) {
if (typeof topContent === "undefined") {
return (jsx(TableTopContent, { addButton: topContentOptions?.addButton, searchInput: topContentOptions?.searchInput, moreComponents: topContentOptions?.moreComponents, baseProps: topContentOptions?.baseProps, leftBaseProps: topContentOptions?.leftBaseProps, rightBaseProps: topContentOptions?.rightBaseProps, moreComponentBaseProps: topContentOptions?.moreComponentBaseProps }));
}
else {
return topContent;
}
}
const Thead = ({ tHeadProps, children }) => {
return (jsx("thead", { ...(tHeadProps
? {
...tHeadProps,
...(tHeadProps?.className
? {
className: `${tHeadProps?.className} text-xs text-gray-700 uppercase bg-gray-50`,
}
: {
className: "text-xs text-gray-700 uppercase bg-gray-50",
}),
}
: { className: "text-xs text-gray-700 uppercase bg-gray-50" }), children: children }));
};
const TheadTr = ({ tHeadTrProps, children }) => {
return (jsx("tr", { ...(tHeadTrProps
? {
...tHeadTrProps,
...(tHeadTrProps?.className
? {
className: `${tHeadTrProps?.className} h-fit`,
}
: { className: "h-fit" }),
}
: { className: "h-fit" }), children: children }));
};
const TbodyTr = ({ tBodyTrProps, children, index }) => {
return (jsx("tr", { ...(tBodyTrProps
? {
...tBodyTrProps,
...(tBodyTrProps?.className
? {
className: `${tBodyTrProps?.className} odd:bg-white even:bg-gray-50 border-b`,
}
: {
className: "odd:bg-white even:bg-gray-50 border-b",
}),
}
: {
className: "odd:bg-white even:bg-gray-50 border-b",
}), children: children }, index));
};
const Tbody = ({ tBodyProps, children }) => {
return jsx("tbody", { ...tBodyProps, children: children });
};
const Base = ({ children, baseProps }) => {
return (jsx("div", { ...(baseProps
? {
...baseProps,
...(baseProps.className
? {
className: `shadow-md overflow-x-auto scrollbar-hide sm:rounded-lg px-5 py-2 ${baseProps.className}`,
}
: {
className: `shadow-md overflow-x-auto scrollbar-hide sm:rounded-lg px-5 py-2`,
}),
}
: {
className: `shadow-md overflow-x-auto scrollbar-hide sm:rounded-lg px-5 py-2`,
}), children: children }));
};
const TableBase = ({ children, tableBaseProps }) => {
return (jsx("div", { ...(tableBaseProps
? {
...tableBaseProps,
...(tableBaseProps.className
? {
className: `overflow-x-auto max-h-96 h-fit ${tableBaseProps.className}`,
}
: {
className: `overflow-x-auto max-h-96 h-fit`,
}),
}
: {
className: `overflow-x-auto max-h-96 h-fit`,
}), children: children }));
};
const Table = ({ children, tableProps }) => {
return (jsx("table", { ...(tableProps
? {
...tableProps,
...(tableProps.className
? {
className: `w-full text-sm text-left rtl:text-right text-gray-500 ${tableProps.className}`,
}
: {
className: `w-full text-sm text-left rtl:text-right text-gray-500`,
}),
}
: {
className: `w-full text-sm text-left rtl:text-right text-gray-500`,
}), children: children }));
};
const Th = ({ column, colIndex, children, }) => {
return (createElement("th", { ...(column.normalProps?.th
? {
...column.normalProps?.th,
...(column.normalProps?.th?.className
? {
className: `${column.normalProps?.th?.className} ${column.useAction && "text-end"} px-2 py-3`,
}
: { className: `px-2 py-3 ${column.useAction && "text-end"}` }),
}
: { className: `px-2 py-3 ${column.useAction && "text-end"}` }), key: colIndex, scope: "col" }, children));
};
const DynamicTable = ({ items, columns, topContent, topContentOptions, usePagination, pagination, emptyContent, isLoading, loadingContent, tableName, tBodyTrProps, tHeadTrProps, tBodyProps, tHeadProps, baseProps, tableBaseProps, tableProps, keyAccessor, }) => {
return (jsxs(Base, { baseProps: baseProps, children: [renderTopContent(topContent, topContentOptions), jsxs(TableBase, { tableBaseProps: tableBaseProps, children: [jsxs(Table, { tableProps: tableProps, children: [jsx(Thead, { tHeadProps: tHeadProps, children: jsx(TheadTr, { tHeadTrProps: tHeadTrProps, children: columns.map((column, index) => {
if (column?.showIf === undefined || column.showIf === true) {
return (jsx(Th, { colIndex: index, column: column, children: column?.rename || column?.columnName }, `${index} - ${column?.columnName}`));
}
return null;
}) }) }), jsx(Tbody, { tBodyProps: tBodyProps, children: !isLoading &&
items.map((item, index) => {
const getKey = getNestedValue(item, keyAccessor);
return (jsx(TbodyTr, { index: index, tBodyTrProps: tBodyTrProps, children: Array.isArray(columns) &&
columns.map((column, colIndex) => {
if (column?.showIf === undefined ||
column.showIf === true) {
if (column.useCondition) {
const findTrueColumn = findTrueContion(column, item);
if (findTrueColumn?.redner) {
return celValue(findTrueColumn?.redner, colIndex, item);
}
else {
return "";
}
}
else {
return celValue(column, colIndex, item);
}
}
return null;
}) }, `${index}-${getKey}`));
}) })] }), isLoading && (jsx("div", { className: "w-full h-[10rem] text-gray-500 flex flex-col items-center justify-center", children: loadingContent ? loadingContent : "loading..." })), !items.length && !isLoading && (jsx("div", { className: "w-full h-[10rem] text-gray-500 flex flex-col items-center justify-center", children: emptyContent
? emptyContent
: `No ${tableName ? tableName : "Date"} Added ` }))] }), usePagination && pagination && (jsx(PaginationController, { pagination: pagination }))] }));
};
export { DynamicTable };
//# sourceMappingURL=index.js.map