update TableBetter.tsx
This commit is contained in:
parent
91e6d9f5fd
commit
56388ed38a
|
|
@ -340,383 +340,6 @@ export const TableEditBetter: React.FC<any> = ({
|
|||
</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> = ({
|
||||
|
|
|
|||
Loading…
Reference in New Issue