@premieroctet/next-admin
Version:
Next-Admin provides a customizable and turnkey admin dashboard for applications built with Next.js and powered by the Prisma ORM. It aims to simplify the development process by providing a turnkey admin system that can be easily integrated into your proje
178 lines (177 loc) • 11.1 kB
JavaScript
import { jsx, jsxs } from "react/jsx-runtime";
import { DndContext } from "@dnd-kit/core";
import { SortableContext } from "@dnd-kit/sortable";
import { Bars2Icon, XMarkIcon } from "@heroicons/react/24/outline";
import { flexRender, getCoreRowModel, useReactTable } from "@tanstack/react-table";
import { useEffect } from "react";
import { useConfig } from "../context/ConfigContext.mjs";
import { useRouterInternal } from "../hooks/useRouterInternal.mjs";
import { slugify } from "../utils/tools.mjs";
import external_EmptyState_mjs_default from "./EmptyState.mjs";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "./radix/Table.mjs";
import external_SortableTableRow_mjs_default from "./SortableTableRow.mjs";
function DataTable({ columns, data, resource, resourcesIdProperty, rowSelection, setRowSelection, icon, onRemoveClick, deletable = false, onOrderChange, orderField }) {
const { basePath } = useConfig();
const { router } = useRouterInternal();
const columnsVisibility = columns.reduce((acc, column)=>{
const key = column.accessorKey;
if (data[0]) acc[key] = Object.keys(data[0]).includes(key);
return acc;
}, {});
const modelIdProperty = resourcesIdProperty[resource];
const handleColumnOrderChange = onOrderChange ? (value)=>{
onOrderChange(value);
} : void 0;
const handleDragEnd = (event)=>{
const { active, over } = event;
if (over && active.id !== over.id) onOrderChange?.({
currentId: active.id,
moveOverId: over.id
});
};
const table = useReactTable({
data,
manualSorting: true,
columns,
getCoreRowModel: getCoreRowModel(),
initialState: {
columnVisibility: columnsVisibility
},
state: {
rowSelection
},
enableRowSelection: true,
onColumnOrderChange: handleColumnOrderChange,
onRowSelectionChange: setRowSelection
});
useEffect(()=>{
const searchParams = new URLSearchParams(window.location.search);
const pageNumber = Number(searchParams.get("page"));
if (!table.getRowModel().rows?.length && pageNumber && pageNumber > 1) {
const searchParamsObject = Object.fromEntries(searchParams.entries());
router.replace({
pathname: location.pathname,
query: {
...searchParamsObject,
page: 1
}
});
}
}, [
router,
table
]);
return /*#__PURE__*/ jsx("div", {
className: "bg-nextadmin-background-default dark:bg-dark-nextadmin-background-emphasis border-nextadmin-border-default dark:border-dark-nextadmin-border-default overflow-hidden rounded-lg border",
children: orderField ? /*#__PURE__*/ jsx(DndContext, {
onDragEnd: handleDragEnd,
children: /*#__PURE__*/ jsxs(Table, {
children: [
table.getRowModel().rows?.length > 0 && /*#__PURE__*/ jsx(TableHeader, {
children: table.getHeaderGroups().map((headerGroup)=>/*#__PURE__*/ jsxs(TableRow, {
className: "border-b-nextadmin-border-strong dark:border-b-dark-nextadmin-border-default",
children: [
/*#__PURE__*/ jsx(TableHead, {
className: "w-10"
}),
headerGroup.headers.map((header)=>/*#__PURE__*/ jsx(TableHead, {
children: header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())
}, header.id))
]
}, headerGroup.id))
}),
/*#__PURE__*/ jsx(TableBody, {
children: table.getRowModel().rows?.length ? /*#__PURE__*/ jsx(SortableContext, {
items: data.map((row)=>row[modelIdProperty].value),
children: table.getRowModel().rows.map((row)=>/*#__PURE__*/ jsxs(external_SortableTableRow_mjs_default, {
id: row.original[modelIdProperty].value,
"data-state": row.getIsSelected() && "selected",
className: `hover:bg-nextadmin-background-muted text-nextadmin-content-inverted dark:text-dark-nextadmin-content-inverted dark:hover:bg-dark-nextadmin-background-muted/75 border-b-nextadmin-border-strong dark:border-b-dark-nextadmin-border-default cursor-pointer border-b ${row.getIsSelected() ? "bg-nextadmin-background-emphasis/40 dark:bg-dark-nextadmin-background-subtle" : "even:bg-nextadmin-background-subtle dark:even:bg-dark-nextadmin-background-subtle/60"}`,
onClick: ()=>{
window.location.href = `${basePath}/${slugify(resource)}/${row.original[modelIdProperty].value}`;
},
grabElement: /*#__PURE__*/ jsx(TableCell, {
className: "pr-0",
children: /*#__PURE__*/ jsx(Bars2Icon, {
className: "text-nextadmin-content-default dark:text-dark-nextadmin-content-default h-5 w-5 cursor-grab active:cursor-grabbing"
})
}),
children: [
row.getVisibleCells().map((cell)=>/*#__PURE__*/ jsx(TableCell, {
className: `group py-3 ${"__nextadmin-actions" === cell.column.id && "text-right"}`,
children: flexRender(cell.column.columnDef.cell, cell.getContext())
}, cell.id)),
deletable && onRemoveClick && /*#__PURE__*/ jsx(TableCell, {
className: "flex justify-end",
children: /*#__PURE__*/ jsx(XMarkIcon, {
onClick: (e)=>{
e.stopPropagation();
return onRemoveClick(row.original[modelIdProperty].value);
},
className: "text-nextadmin-content-default dark:text-dark-nextadmin-content-default h-5 w-5 cursor-pointer"
})
})
]
}, row.id))
}) : /*#__PURE__*/ jsx(TableRow, {
children: /*#__PURE__*/ jsx(TableCell, {
colSpan: table.getAllColumns().length,
className: "h-24 text-center",
children: /*#__PURE__*/ jsx(external_EmptyState_mjs_default, {
resource: resource,
icon: icon
})
})
})
})
]
})
}) : /*#__PURE__*/ jsxs(Table, {
children: [
table.getRowModel().rows?.length > 0 && /*#__PURE__*/ jsx(TableHeader, {
children: table.getHeaderGroups().map((headerGroup)=>/*#__PURE__*/ jsx(TableRow, {
className: "border-b-nextadmin-border-strong dark:border-b-dark-nextadmin-border-default",
children: headerGroup.headers.map((header)=>/*#__PURE__*/ jsx(TableHead, {
children: header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())
}, header.id))
}, headerGroup.id))
}),
/*#__PURE__*/ jsx(TableBody, {
children: table.getRowModel().rows?.length ? table.getRowModel().rows.map((row)=>/*#__PURE__*/ jsxs(TableRow, {
"data-state": row.getIsSelected() && "selected",
className: `hover:bg-nextadmin-background-muted text-nextadmin-content-inverted dark:text-dark-nextadmin-content-inverted dark:hover:bg-dark-nextadmin-background-muted/75 border-b-nextadmin-border-strong dark:border-b-dark-nextadmin-border-default cursor-pointer border-b ${row.getIsSelected() ? "bg-nextadmin-background-emphasis/40 dark:bg-dark-nextadmin-background-subtle" : "even:bg-nextadmin-background-subtle dark:even:bg-dark-nextadmin-background-subtle/60"}`,
onClick: ()=>{
window.location.href = `${basePath}/${slugify(resource)}/${row.original[modelIdProperty].value}`;
},
children: [
row.getVisibleCells().map((cell)=>/*#__PURE__*/ jsx(TableCell, {
className: `group py-3 ${"__nextadmin-actions" === cell.column.id ? "text-right" : ""}`,
children: flexRender(cell.column.columnDef.cell, cell.getContext())
}, cell.id)),
deletable && onRemoveClick && /*#__PURE__*/ jsx(TableCell, {
className: "flex justify-end",
children: /*#__PURE__*/ jsx(XMarkIcon, {
onClick: (e)=>{
e.stopPropagation();
return onRemoveClick(row.original[modelIdProperty].value);
},
className: "text-nextadmin-content-default dark:text-dark-nextadmin-content-default h-5 w-5 cursor-pointer"
})
})
]
}, row.id)) : /*#__PURE__*/ jsx(TableRow, {
children: /*#__PURE__*/ jsx(TableCell, {
colSpan: table.getAllColumns().length,
className: "h-24 text-center",
children: /*#__PURE__*/ jsx(external_EmptyState_mjs_default, {
resource: resource,
icon: icon
})
})
})
})
]
})
});
}
export { DataTable };