update TableBetter.tsx
This commit is contained in:
parent
91e6d9f5fd
commit
56388ed38a
|
|
@ -340,383 +340,6 @@ export const TableEditBetter: React.FC<any> = ({
|
||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<div className="tbl-wrapper flex flex-grow flex-col">
|
|
||||||
{!disabledHeader ? (
|
|
||||||
<div className="head-tbl-list block items-start justify-between bg-white px-0 py-4 sm:flex">
|
|
||||||
<div className="flex flex-row items-end">
|
|
||||||
<div className="sm:flex flex flex-col space-y-2">
|
|
||||||
<div className="flex">
|
|
||||||
{sideLeft ? (
|
|
||||||
sideLeft(local)
|
|
||||||
) : (
|
|
||||||
<>
|
|
||||||
<Link href={"/new"}>
|
|
||||||
<Button className="bg-primary">
|
|
||||||
<div className="flex items-center gap-x-0.5">
|
|
||||||
<HiPlus className="text-xl" />
|
|
||||||
<span className="capitalize">Add {name}</span>
|
|
||||||
</div>
|
|
||||||
</Button>
|
|
||||||
</Link>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="ml-auto flex items-center flex-row">
|
|
||||||
<div className="tbl-search hidden items-center sm:mb-0 sm:flex sm:divide-x sm:divide-gray-100">
|
|
||||||
<form
|
|
||||||
onSubmit={async (e) => {
|
|
||||||
e.preventDefault();
|
|
||||||
await local.reload();
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Label htmlFor="users-search" className="sr-only">
|
|
||||||
Search
|
|
||||||
</Label>
|
|
||||||
<div className="relative lg:w-56">
|
|
||||||
<InputSearch
|
|
||||||
// className="bg-white search text-xs "
|
|
||||||
id="users-search"
|
|
||||||
name="users-search"
|
|
||||||
placeholder={`Search`}
|
|
||||||
onChange={(e) => {
|
|
||||||
const value = e.target.value;
|
|
||||||
local.search = value;
|
|
||||||
local.render();
|
|
||||||
handleSearch();
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
<div className="flex">{sideRight ? sideRight(local) : <></>}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<></>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<div className="flex flex-col flex-grow">
|
|
||||||
<div className="overflow-auto relative flex-grow flex-row">
|
|
||||||
<div className="tbl absolute top-0 left-0 inline-block flex-grow w-full h-full align-middle">
|
|
||||||
<div className="relative">
|
|
||||||
<Table
|
|
||||||
className={cx(
|
|
||||||
"min-w-full divide-y divide-gray-200 ",
|
|
||||||
css`
|
|
||||||
thead th:first-child {
|
|
||||||
overflow: hidden;
|
|
||||||
border-top-left-radius: 10px; /* Sudut kiri atas */
|
|
||||||
border-bottom-left-radius: 10px;
|
|
||||||
}
|
|
||||||
thead th:last-child {
|
|
||||||
overflow: hidden;
|
|
||||||
border-top-right-radius: 10px; /* Sudut kiri atas */
|
|
||||||
border-bottom-right-radius: 10px;
|
|
||||||
}
|
|
||||||
tbody td:first-child {
|
|
||||||
overflow: hidden;
|
|
||||||
border-top-left-radius: 10px; /* Sudut kiri atas */
|
|
||||||
border-bottom-left-radius: 10px;
|
|
||||||
}
|
|
||||||
tbody td:last-child {
|
|
||||||
overflow: hidden;
|
|
||||||
border-top-right-radius: 10px; /* Sudut kiri atas */
|
|
||||||
border-bottom-right-radius: 10px;
|
|
||||||
}
|
|
||||||
`,
|
|
||||||
checkbox &&
|
|
||||||
css`
|
|
||||||
.table-header-tbl > th:first-child {
|
|
||||||
width: 20px !important; /* Atur lebar sesuai kebutuhan */
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
.table-row-element > td:first-child {
|
|
||||||
width: 20px !important; /* Atur lebar sesuai kebutuhan */
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
`
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
{!disabledHeadTable ? (
|
|
||||||
<thead className="rounded-md overflow-hidden text-md bg-second group/head text-md uppercase text-gray-700 sticky top-0">
|
|
||||||
{table.getHeaderGroups().map((headerGroup) => (
|
|
||||||
<tr
|
|
||||||
key={`${headerGroup.id}`}
|
|
||||||
className={"table-header-tbl"}
|
|
||||||
>
|
|
||||||
{headerGroup.headers.map((header, index) => {
|
|
||||||
const name = header.column.id;
|
|
||||||
const col = column.find(
|
|
||||||
(e: any) => e?.name === name
|
|
||||||
);
|
|
||||||
const isSort =
|
|
||||||
name === "select"
|
|
||||||
? false
|
|
||||||
: typeof col?.sortable === "boolean"
|
|
||||||
? col.sortable
|
|
||||||
: true;
|
|
||||||
const resize =
|
|
||||||
name === "select"
|
|
||||||
? false
|
|
||||||
: typeof col?.resize === "boolean"
|
|
||||||
? col.resize
|
|
||||||
: true;
|
|
||||||
return (
|
|
||||||
<th
|
|
||||||
{...{
|
|
||||||
style: {
|
|
||||||
width: !resize
|
|
||||||
? `${col?.width}px`
|
|
||||||
: name === "select"
|
|
||||||
? `${5}px`
|
|
||||||
: col?.width
|
|
||||||
? header.getSize() < col?.width
|
|
||||||
? `${col.width}px`
|
|
||||||
: header.getSize()
|
|
||||||
: header.getSize(),
|
|
||||||
},
|
|
||||||
}}
|
|
||||||
key={header.id}
|
|
||||||
colSpan={header.colSpan}
|
|
||||||
className={cx(
|
|
||||||
"relative px-2 py-2 text-sm py-1 uppercase",
|
|
||||||
name === "select" &&
|
|
||||||
css`
|
|
||||||
max-width: 5px;
|
|
||||||
`
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
key={`${header.id}-label`}
|
|
||||||
{...{
|
|
||||||
style: col?.width
|
|
||||||
? {
|
|
||||||
minWidth: `${col.width}px`,
|
|
||||||
}
|
|
||||||
: {},
|
|
||||||
}}
|
|
||||||
onClick={() => {
|
|
||||||
if (isSort) {
|
|
||||||
const sort = local?.sort?.[name];
|
|
||||||
const mode =
|
|
||||||
sort === "desc"
|
|
||||||
? null
|
|
||||||
: sort === "asc"
|
|
||||||
? "desc"
|
|
||||||
: "asc";
|
|
||||||
local.sort = mode
|
|
||||||
? {
|
|
||||||
[name]: mode,
|
|
||||||
}
|
|
||||||
: {};
|
|
||||||
local.render();
|
|
||||||
|
|
||||||
local.reload();
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
className={cx(
|
|
||||||
"flex flex-grow flex-row flex-grow select-none items-center flex-row text-base text-nowrap",
|
|
||||||
isSort ? " cursor-pointer" : ""
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
className={cx(
|
|
||||||
"flex flex-row items-center flex-grow text-sm capitalize",
|
|
||||||
name === "select" ? "justify-center" : ""
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
{header.isPlaceholder
|
|
||||||
? null
|
|
||||||
: flexRender(
|
|
||||||
header.column.columnDef.header,
|
|
||||||
header.getContext()
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
{isSort ? (
|
|
||||||
<div className="flex flex-col items-center">
|
|
||||||
<FaChevronUp
|
|
||||||
className={cx(
|
|
||||||
"px-0.5 mx-1 text-[12px]",
|
|
||||||
local?.sort?.[name] === "asc"
|
|
||||||
? "text-black"
|
|
||||||
: "text-gray-500"
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
<FaChevronDown
|
|
||||||
className={cx(
|
|
||||||
"px-0.5 mx-1 text-[12px]",
|
|
||||||
local?.sort?.[name] === "desc"
|
|
||||||
? "text-black"
|
|
||||||
: "text-gray-500"
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<></>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{headerGroup.headers.length !== index + 1 ? (
|
|
||||||
<div
|
|
||||||
key={`${header.id}-resizer`} // Tambahkan key unik
|
|
||||||
{...{
|
|
||||||
onDoubleClick: () =>
|
|
||||||
header.column.resetSize(),
|
|
||||||
onMouseDown: header.getResizeHandler(),
|
|
||||||
onTouchStart: header.getResizeHandler(),
|
|
||||||
className: cx(
|
|
||||||
`resizer bg-[#b3c9fe] cursor-e-resize ${
|
|
||||||
table.options.columnResizeDirection
|
|
||||||
} ${
|
|
||||||
header.column.getIsResizing()
|
|
||||||
? "isResizing"
|
|
||||||
: ""
|
|
||||||
}`,
|
|
||||||
css`
|
|
||||||
width: 1px;
|
|
||||||
cursor: e-resize !important;
|
|
||||||
`
|
|
||||||
),
|
|
||||||
style: {
|
|
||||||
transform:
|
|
||||||
columnResizeMode === "onEnd" &&
|
|
||||||
header.column.getIsResizing()
|
|
||||||
? `translateX(${
|
|
||||||
(table.options
|
|
||||||
.columnResizeDirection ===
|
|
||||||
"rtl"
|
|
||||||
? -1
|
|
||||||
: 1) *
|
|
||||||
(table.getState()
|
|
||||||
.columnSizingInfo
|
|
||||||
.deltaOffset ?? 0)
|
|
||||||
}px)`
|
|
||||||
: "",
|
|
||||||
},
|
|
||||||
}}
|
|
||||||
></div>
|
|
||||||
) : null}
|
|
||||||
</th>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</tr>
|
|
||||||
))}
|
|
||||||
</thead>
|
|
||||||
) : (
|
|
||||||
<></>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<Table.Body className="divide-y border-none bg-white">
|
|
||||||
{table.getRowModel().rows.map((row, idx) => {
|
|
||||||
const fm_row =
|
|
||||||
mode === "form" ? local.dataForm?.[idx] : null;
|
|
||||||
return (
|
|
||||||
<Table.Row
|
|
||||||
key={row.id}
|
|
||||||
className={cx(
|
|
||||||
disabledHoverRow ? "" : "hover:bg-gray-100",
|
|
||||||
css`
|
|
||||||
height: 44px;
|
|
||||||
> td {
|
|
||||||
vertical-align: ${align};
|
|
||||||
}
|
|
||||||
`,
|
|
||||||
"border-none"
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
{row.getVisibleCells().map((cell: any) => {
|
|
||||||
const ctx = cell.getContext();
|
|
||||||
const param = {
|
|
||||||
row: row.original,
|
|
||||||
name: get(ctx, "column.columnDef.accessorKey"),
|
|
||||||
cell,
|
|
||||||
idx,
|
|
||||||
tbl: local,
|
|
||||||
fm_row: fm_row,
|
|
||||||
onChange,
|
|
||||||
};
|
|
||||||
const head = column.find(
|
|
||||||
(e: any) =>
|
|
||||||
e?.name ===
|
|
||||||
get(ctx, "column.columnDef.accessorKey")
|
|
||||||
);
|
|
||||||
const renderData =
|
|
||||||
typeof head?.renderCell === "function"
|
|
||||||
? head.renderCell(param)
|
|
||||||
: flexRender(
|
|
||||||
cell.column.columnDef.cell,
|
|
||||||
cell.getContext()
|
|
||||||
);
|
|
||||||
return (
|
|
||||||
<Table.Cell
|
|
||||||
className={cx(
|
|
||||||
"text-md px-2 py-1 whitespace-nowrap text-gray-900 items-start",
|
|
||||||
name === "select"
|
|
||||||
? css`
|
|
||||||
width: 5px;
|
|
||||||
`
|
|
||||||
: ``
|
|
||||||
)}
|
|
||||||
key={cell.id}
|
|
||||||
>
|
|
||||||
{renderData}
|
|
||||||
</Table.Cell>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</Table.Row>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</Table.Body>
|
|
||||||
</Table>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{!hiddenNoRow && !table.getRowModel().rows?.length && (
|
|
||||||
<div
|
|
||||||
className={cx(
|
|
||||||
"flex-1 w-full absolute inset-0 flex flex-col items-center justify-center",
|
|
||||||
css`
|
|
||||||
top: 50%;
|
|
||||||
transform: translateY(-50%);
|
|
||||||
`
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
<div className="max-w-[15%] flex flex-col items-center">
|
|
||||||
<Sticker size={35} strokeWidth={1} />
|
|
||||||
<div className="pt-1 text-center">No Data</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<Pagination
|
|
||||||
list={local}
|
|
||||||
count={local.count}
|
|
||||||
onNextPage={() => table.nextPage()}
|
|
||||||
onPrevPage={() => table.previousPage()}
|
|
||||||
disabledNextPage={!table.getCanNextPage()}
|
|
||||||
disabledPrevPage={!table.getCanPreviousPage()}
|
|
||||||
page={table.getState().pagination.pageIndex + 1}
|
|
||||||
setPage={(page: any) => {
|
|
||||||
setPagination({
|
|
||||||
pageIndex: page,
|
|
||||||
pageSize: 20,
|
|
||||||
});
|
|
||||||
}}
|
|
||||||
countPage={table.getPageCount()}
|
|
||||||
countData={local.data.length}
|
|
||||||
take={take}
|
|
||||||
onChangePage={(page: number) => {
|
|
||||||
table.setPageIndex(page);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
};
|
};
|
||||||
|
|
||||||
export const Pagination: React.FC<any> = ({
|
export const Pagination: React.FC<any> = ({
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue