diff --git a/components/tablelist/TableBetter.tsx b/components/tablelist/TableBetter.tsx
index f890e8d..412eedc 100644
--- a/components/tablelist/TableBetter.tsx
+++ b/components/tablelist/TableBetter.tsx
@@ -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&nbsp;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> = ({