@react-fabric/data 1.0.0-beta.61 → 1.0.0-beta.63

package/dist/esm/virtual/List.js

@@ -169,7 +169,7 @@ var _VirtualList = function _VirtualList(_ref) {
   return /*#__PURE__*/jsx("div", _objectSpread(_objectSpread({
     ref: scrollerRef,
     onScroll: handleScroll,
-    className: classNames("area-content bg-base overflow-auto")
+    className: classNames("area-content bg-default overflow-auto")
   }, aria), {}, {
     children: /*#__PURE__*/jsxs("div", {
       className: classNames("flex flex-nowrap gap-2 justify-center min-h-full min-w-full", orientation === "horizontal" && "flex-col"),
@@ -214,7 +214,7 @@ var _VirtualList = function _VirtualList(_ref) {
           children: /*#__PURE__*/jsx(Skeleton, {})
         })]
       }), !hideScroller && /*#__PURE__*/jsx("div", {
-        className: classNames(orientation === "vertical" && "self-end sticky bottom-2", orientation === "horizontal" && "self-end sticky end-2"),
+        className: classNames(orientation === "vertical" && "self-end sticky bottom-2", orientation === "horizontal" && "self-end sticky inset-e-2"),
         children: /*#__PURE__*/jsx(Scroller, {
           vertical: orientation === "vertical",
           scrollActive: scrollActive,
@@ -246,7 +246,7 @@ var GenericMemo = memo;
  * It can be used with a ref to control scrolling and hilighting of items.
  *
  * @param {VirtualListProps<T>} props - The properties for the VirtualList component.
- * @returns {JSX.Element} The rendered VirtualList component.
+ * @returns {React.ReactElement} The rendered VirtualList component.
  * @template T - The type of items in the list, extending AnyObject.
  *
  * @example

package/dist/types/checklist/CheckList.d.ts

@@ -32,7 +32,7 @@ export interface CheckListProps extends SelectableProps, TestProps {
  * It supports selection, deselection, and allows for negative selections.
  *
  * @param {CheckListProps} props - The properties for the CheckList component.
- * @returns {JSX.Element} The rendered CheckList component.
+ * @returns {React.ReactElement} The rendered CheckList component.
  *
  * @example
  * ```jsx

package/dist/types/histogram/Histogram.d.ts

@@ -26,11 +26,11 @@ export interface HistogramProps extends TestProps {
     /**
      * title when histo list is empty
      */
-    emptyTitle?: string | JSX.Element;
+    emptyTitle?: string | React.ReactElement;
     /**
      * message when histo list is empty
      */
-    emptyMessage?: string | JSX.Element;
+    emptyMessage?: string | React.ReactElement;
     /**
      * handle histo click
      */
@@ -43,7 +43,7 @@ export interface HistogramProps extends TestProps {
  * It also provides an empty state when there are no items to display.
  *
  * @param {HistogramProps} props - The properties for the Histogram component.
- * @returns {JSX.Element} - The rendered Histogram component.
+ * @returns {React.ReactElement} - The rendered Histogram component.
  *
  * @example
  * ```jsx

package/dist/types/index.d.ts

@@ -3,6 +3,7 @@ export { CheckList } from "./checklist/CheckList";
 export { Histogram } from "./histogram/Histogram";
 export { JsonViewer } from "./json/JsonViewer";
 export { Pagination } from "./pagination/Pagination";
+export { HtmlTable } from "./table/HtmlTable";
 export { Table } from "./table/Table";
 export { type TableColumn, type TableRef } from "./table/types";
 export { TreePanel } from "./tree/TreePanel";

package/dist/types/json/JsonViewer.d.ts

@@ -53,7 +53,7 @@ export interface JsonViewProps<T> extends CssProp {
     /**
      * render function for custom value display
      */
-    formatter?: (path?: string, value?: AnyObject) => string | JSX.Element | undefined;
+    formatter?: (path?: string, value?: AnyObject) => string | React.ReactElement | undefined;
 }
 /**
  * JsonViewer component to display JSON data in a structured format.
@@ -62,7 +62,7 @@ export interface JsonViewProps<T> extends CssProp {
  * It also provides options for copying values and filtering properties.
  *
  * @param {JsonViewProps<T>} props - The properties for the JsonViewer component.
- * @returns {JSX.Element} The rendered JsonViewer component.
+ * @returns {React.ReactElement} The rendered JsonViewer component.
  *
  * @example
  * ```jsx

package/dist/types/pagination/Pagination.d.ts

@@ -28,6 +28,6 @@ export interface PaginationProps {
  * It uses memoization to optimize rendering performance.
  *
  * @param {PaginationProps} props - The properties for the Pagination component.
- * @returns {JSX.Element} The rendered Pagination component.
+ * @returns {React.ReactElement} The rendered Pagination component.
  */
 export declare const Pagination: import("react").MemoExoticComponent<({ page, ranges, totalPages, minimal, onPageChange }: PaginationProps) => import("react/jsx-runtime").JSX.Element>;

package/dist/types/table/BodyCell.d.ts

@@ -1,5 +1,5 @@
 import { type TableColumn } from "./types";
-export declare const BodyCell: ({ column, item, index, }: {
+export declare const BodyCell: ({ column, item, index }: {
     column: TableColumn;
     item: KeyValue;
     index: number;

package/dist/types/table/EmptyCell.d.ts

@@ -1,2 +1,2 @@
 import { type TableColumn } from "./types";
-export declare const EmptyCell: ({ id, width: _width, maxWidth, minWidth, }: TableColumn) => import("react/jsx-runtime").JSX.Element;
+export declare const EmptyCell: ({ id, width: _width, maxWidth, minWidth }: TableColumn) => import("react/jsx-runtime").JSX.Element;

package/dist/types/table/HtmlTable.d.ts

@@ -0,0 +1,21 @@
+interface Props<T = KeyValue> {
+    data: T[];
+    columns: Array<{
+        id: keyof T;
+        label?: string;
+        width?: number | string;
+        maxWidth?: number | string;
+        align?: "start" | "center" | "end";
+        className?: string;
+        headRenderer?: React.ReactNode;
+        renderer?: (value: any, row: T, index: number) => React.ReactNode;
+    }>;
+    /**
+     * Number of pagination buttons to show, default is 25
+     * If set to 0, pagination will be hidden
+     */
+    paginationSize?: number;
+    className?: string;
+}
+export declare const HtmlTable: <T extends KeyValue = KeyValue>({ data, columns, paginationSize, className, }: Props<T>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/table/{Context.d.ts → Provider.d.ts}

@@ -1,8 +1,2 @@
 import { type ChildrenProp } from "@react-fabric/core/dist/types/types";
-interface Context {
-    widths: Map<string, number>;
-    startResize: (col: HTMLElement) => void;
-}
 export declare const TableProvider: ({ children }: ChildrenProp) => import("react/jsx-runtime").JSX.Element;
-export declare const useTableContext: () => Context;
-export {};

package/dist/types/table/Table.d.ts

@@ -7,7 +7,7 @@ import { type TableProps } from "./types";
  * Uses TanStack's `useVirtual` for virtualization and React's `useMemo` for performance optimization.
  *
  * @param {TableProps<T>} props - The properties for the Table component.
- * @returns {JSX.Element} The rendered Table component.
+ * @returns {React.ReactElement} The rendered Table component.
  *
  * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/story/data-table--table}
  * @see {@link https://tanstack.com/table/v8/docs/api/virtual}

package/dist/types/table/context.d.ts

@@ -0,0 +1,7 @@
+interface Context {
+    widths: Map<string, number>;
+    startResize: (col: HTMLElement) => void;
+}
+export declare const TableContext: import("react").Context<Context>;
+export declare const useTableContext: () => Context;
+export {};

package/dist/types/table/useVirtualTable.d.ts

@@ -25,7 +25,7 @@ export declare const useVirtualTable: <T extends KeyValue = KeyValue>(data: T[],
     isActiveSticky: (index: number) => boolean;
     top: number | undefined;
     totalSize: () => number;
-    measureElement: (node: Element | null | undefined) => void;
+    measureElement: (node: Element | null) => void;
     toggleGroupExpand: (key: Key) => void;
     toggleExpand: (key: Key) => void;
     toggleChecked: (key: Key) => void;

package/dist/types/tree/TreePanel.d.ts

@@ -5,7 +5,7 @@ import { type TreePanelProps } from "./types";
  * nodes and supports checkable nodes.
  *
  * @param {TreePanelProps<T>} props - The properties for the TreePanel component.
- * @returns {JSX.Element} The rendered TreePanel component.
+ * @returns {React.ReactElement} The rendered TreePanel component.
  * @template T - The type of items in the tree, extending KeyValue.
  *
  * @example

package/dist/types/tree/types.d.ts

@@ -5,7 +5,7 @@ interface TreeBaseNode<T> extends CssProp, TestProps {
     /**
      * display label
      */
-    label: Elements<JSX.Element>;
+    label: Elements<React.ReactElement>;
     /**
      * icon path or props
      */
@@ -39,7 +39,7 @@ export type TreeNodeType<T extends KeyValue = KeyValue> = TreeBaseNode<T> & ({
 });
 export interface InternalNode extends CssProp, TestProps {
     id: string;
-    label: Elements<JSX.Element>;
+    label: Elements<React.ReactElement>;
     queryable?: string;
     badge?: string | number | BadgeType;
     disabled?: boolean;
@@ -66,8 +66,8 @@ export interface InternalNode extends CssProp, TestProps {
 export interface TreeNodeProps extends ChildProp {
     node: InternalNode;
     expanders: [string, string];
-    defaultNodeIcon?: Elements<JSX.Element>;
-    defaultLeafIcon?: Elements<JSX.Element>;
+    defaultNodeIcon?: Elements<React.ReactElement>;
+    defaultLeafIcon?: Elements<React.ReactElement>;
     noLines?: boolean;
     selectable?: true | "leafOnly";
     checkable?: true | "leafOnly";
@@ -176,8 +176,8 @@ interface BaseTreePanelProps<T extends KeyValue = KeyValue> extends TestProps, R
      */
     matcher?: (data: T, query: string) => boolean;
     sorter?: false | ((a: T, b: T) => number);
-    makeLabel?: (node: T) => Elements<JSX.Element>;
-    makeIcon?: (node: T) => Elements<JSX.Element>;
+    makeLabel?: (node: T) => Elements<React.ReactElement>;
+    makeIcon?: (node: T) => Elements<React.ReactElement>;
     defaultExpanded?: string[];
     onExpandToggle?: (id: string[]) => void;
     leafClassName?: string;

package/dist/types/virtual/Gallery.d.ts

@@ -64,7 +64,7 @@ export interface VirtualGalleryProps<T> extends TestProps {
  * It also provides a scroller for easy navigation through the items.
  *
  * @param {VirtualGalleryProps<T>} props - The properties for the VirtualGallery component.
- * @returns {JSX.Element} The rendered VirtualGallery component.
+ * @returns {React.ReactElement} The rendered VirtualGallery component.
  *
  * @example
  * ```jsx

package/dist/types/virtual/List.d.ts

@@ -65,7 +65,7 @@ export interface VirtualListProps<T> extends TestProps {
  * It can be used with a ref to control scrolling and hilighting of items.
  *
  * @param {VirtualListProps<T>} props - The properties for the VirtualList component.
- * @returns {JSX.Element} The rendered VirtualList component.
+ * @returns {React.ReactElement} The rendered VirtualList component.
  * @template T - The type of items in the list, extending AnyObject.
  *
  * @example

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-fabric/data",
-  "version": "1.0.0-beta.61",
+  "version": "1.0.0-beta.63",
   "description": "RUF: Data package",
   "author": "Adarsh Pastakia <adarshpastakia@outlook.com>",
   "license": "MIT",
@@ -35,24 +35,23 @@
     "watch": "npm-run-all -p watch:rollup watch:dts"
   },
   "dependencies": {
-    "@react-fabric/core": "^1.0.0-beta.61",
-    "@react-fabric/date": "^1.0.0-beta.61",
-    "@react-fabric/form": "^1.0.0-beta.61",
-    "@react-fabric/utilities": "^1.0.0-beta.61",
-    "@tanstack/react-virtual": "~3.13.12",
+    "@react-fabric/core": "^1.0.0-beta.63",
+    "@react-fabric/date": "^1.0.0-beta.63",
+    "@react-fabric/form": "^1.0.0-beta.63",
+    "@react-fabric/utilities": "^1.0.0-beta.63",
+    "@tanstack/react-virtual": "~3.13.22",
     "classnames": "~2.5.1",
-    "color": "~5.0.2",
     "memoize-one": "~6.0.0"
   },
   "peerDependencies": {
-    "i18next": "~25.6.0",
-    "react": "~19.2.0",
-    "react-dom": "~19.2.0",
-    "react-i18next": "~16.2.1"
+    "i18next": "~25.8.18",
+    "react": "~19.2.4",
+    "react-dom": "~19.2.4",
+    "react-i18next": "~16.5.8"
   },
   "engines": {
-    "node": ">=18.12.0",
-    "npm": ">=8.19.0"
+    "node": ">=22.18.0",
+    "npm": ">=10.8.0"
   },
-  "gitHead": "a0b0c571bf9c189fa3355bbc3b896ecc4b9d6a04"
+  "gitHead": "6e0652b15c6384fbc316842862572e21299a5466"
 }

package/src/checklist/CheckList.tsx

@@ -164,7 +164,7 @@ const CheckItem: FC<
  * It supports selection, deselection, and allows for negative selections.
  *
  * @param {CheckListProps} props - The properties for the CheckList component.
- * @returns {JSX.Element} The rendered CheckList component.
+ * @returns {React.ReactElement} The rendered CheckList component.
  *
  * @example
  * ```jsx

package/src/histogram/Histogram.tsx

@@ -63,11 +63,11 @@ export interface HistogramProps extends TestProps {
   /**
    * title when histo list is empty
    */
-  emptyTitle?: string | JSX.Element;
+  emptyTitle?: string | React.ReactElement;
   /**
    * message when histo list is empty
    */
-  emptyMessage?: string | JSX.Element;
+  emptyMessage?: string | React.ReactElement;
   /**
    * handle histo click
    */
@@ -81,7 +81,7 @@ export interface HistogramProps extends TestProps {
  * It also provides an empty state when there are no items to display.
  *
  * @param {HistogramProps} props - The properties for the Histogram component.
- * @returns {JSX.Element} - The rendered Histogram component.
+ * @returns {React.ReactElement} - The rendered Histogram component.
  *
  * @example
  * ```jsx

package/src/i18n/index.ts

@@ -22,7 +22,7 @@
  */
 
 import { addTranslationBundle } from "@react-fabric/core";
-import ar from "./ar.json";
-import en from "./en.json";
+import ar from "./ar/data.json";
+import en from "./en/data.json";
 
 addTranslationBundle("data", { en, ar });

package/src/index.ts

@@ -27,6 +27,7 @@ export { CheckList } from "./checklist/CheckList";
 export { Histogram } from "./histogram/Histogram";
 export { JsonViewer } from "./json/JsonViewer";
 export { Pagination } from "./pagination/Pagination";
+export { HtmlTable } from "./table/HtmlTable";
 export { Table } from "./table/Table";
 export { type TableColumn, type TableRef } from "./table/types";
 export { TreePanel } from "./tree/TreePanel";

package/src/json/JsonViewer.tsx

@@ -100,7 +100,7 @@ export interface JsonViewProps<T> extends CssProp {
   formatter?: (
     path?: string,
     value?: AnyObject,
-  ) => string | JSX.Element | undefined;
+  ) => string | React.ReactElement | undefined;
 }
 
 const reduceObject = (json: AnyObject, keys: string[] = [], prefix = "") => {
@@ -356,7 +356,7 @@ const JsonEntry = ({
  * It also provides options for copying values and filtering properties.
  *
  * @param {JsonViewProps<T>} props - The properties for the JsonViewer component.
- * @returns {JSX.Element} The rendered JsonViewer component.
+ * @returns {React.ReactElement} The rendered JsonViewer component.
  *
  * @example
  * ```jsx

package/src/pagination/Pagination.tsx

@@ -56,7 +56,7 @@ export interface PaginationProps {
  * It uses memoization to optimize rendering performance.
  *
  * @param {PaginationProps} props - The properties for the Pagination component.
- * @returns {JSX.Element} The rendered Pagination component.
+ * @returns {React.ReactElement} The rendered Pagination component.
  */
 export const Pagination = memo(
   ({ page, ranges, totalPages, minimal, onPageChange }: PaginationProps) => {
@@ -70,7 +70,7 @@ export const Pagination = memo(
               key={pg}
               onClick={() => onPageChange(pg)}
               className={classNames(
-                "leading-none text-sm hover:bg-primary-200 w-8 h-6 rounded-full",
+                "leading-none text-sm hover:bg-primary-200 w-8 h-6 rounded-full cursor-pointer",
                 page === pg && "bg-primary-500 text-white pointer-events-none",
               )}
             >
@@ -87,7 +87,7 @@ export const Pagination = memo(
               key={pg}
               onClick={() => onPageChange(pg)}
               className={classNames(
-                "leading-none text-sm hover:bg-primary-200 w-8 h-6 rounded-full",
+                "leading-none text-sm hover:bg-primary-200 w-8 h-6 rounded-full cursor-pointer",
                 page === pg && "bg-primary-500 text-white pointer-events-none",
               )}
             >
@@ -104,7 +104,7 @@ export const Pagination = memo(
               key={pg}
               onClick={() => onPageChange(pg)}
               className={classNames(
-                "leading-none text-sm hover:bg-primary-200 w-8 h-6 rounded-full",
+                "leading-none text-sm hover:bg-primary-200 w-8 h-6 rounded-full cursor-pointer",
                 page === pg && "bg-primary-500 text-white pointer-events-none",
               )}
             >
@@ -121,7 +121,7 @@ export const Pagination = memo(
         <button
           onClick={() => onPageChange(0)}
           className={classNames(
-            "leading-none text-sm hover:bg-primary-200 w-8 h-6 rounded-full",
+            "leading-none text-sm hover:bg-primary-200 w-8 h-6 rounded-full cursor-pointer",
             page === 0 && "pointer-events-none text-tint-300",
           )}
         >
@@ -130,7 +130,7 @@ export const Pagination = memo(
         <button
           onClick={() => onPageChange(page - 1)}
           className={classNames(
-            "leading-none text-sm hover:bg-primary-200 w-8 h-6 rounded-full",
+            "leading-none text-sm hover:bg-primary-200 w-8 h-6 rounded-full cursor-pointer",
             page === 0 && "pointer-events-none text-tint-300",
           )}
         >
@@ -145,7 +145,7 @@ export const Pagination = memo(
         <button
           onClick={() => onPageChange(page + 1)}
           className={classNames(
-            "leading-none text-sm hover:bg-primary-200 w-8 h-6 rounded-full",
+            "leading-none text-sm hover:bg-primary-200 w-8 h-6 rounded-full cursor-pointer",
             page + 1 >= totalPages && "pointer-events-none text-tint-300",
           )}
         >
@@ -154,7 +154,7 @@ export const Pagination = memo(
         <button
           onClick={() => onPageChange(totalPages - 1)}
           className={classNames(
-            "leading-none text-sm hover:bg-primary-200 w-8 h-6 rounded-full",
+            "leading-none text-sm hover:bg-primary-200 w-8 h-6 rounded-full cursor-pointer",
             page + 1 >= totalPages && "pointer-events-none text-tint-300",
           )}
         >

package/src/table/BodyCell.tsx

@@ -22,38 +22,16 @@
  */
 
 import { DateDisplay } from "@react-fabric/date";
-import {
-  Format,
-  getByPath,
-  isArray,
-  isObject,
-  isTrue,
-} from "@react-fabric/utilities";
+import { Format, getByPath, isArray, isObject, isTrue } from "@react-fabric/utilities";
 import classNames from "classnames";
 import { useMemo } from "react";
-import { useTableContext } from "./Context";
-import {
-  COL_DEFAULT_WIDTH,
-  COL_MAX_WIDTH,
-  COL_MIN_WIDTH,
-  type TableColumn,
-} from "./types";
+import { useTableContext } from "./context";
+import { COL_DEFAULT_WIDTH, COL_MAX_WIDTH, COL_MIN_WIDTH, type TableColumn } from "./types";
 
-export const BodyCell = ({
-  column,
-  item,
-  index,
-}: {
-  column: TableColumn;
-  item: KeyValue;
-  index: number;
-}) => {
+export const BodyCell = ({ column, item, index }: { column: TableColumn; item: KeyValue; index: number }) => {
   const { widths } = useTableContext();
 
-  const width = useMemo(
-    () => widths.get(column.id.toString()) ?? column.width,
-    [widths, column],
-  );
+  const width = useMemo(() => widths.get(column.id.toString()) ?? column.width, [widths, column]);
 
   const content = useMemo(() => {
     const value = getByPath(item, column.id.toString());
@@ -65,10 +43,7 @@ export const BodyCell = ({
       return map[`${isTrue(value) ? "true" : "false"}`];
     }
     if (column.valueMap != null) {
-      if (
-        ["number", "string"].includes(column.dataType ?? "string") &&
-        value in column.valueMap
-      ) {
+      if (["number", "string"].includes(column.dataType ?? "string") && value in column.valueMap) {
         return column.valueMap[value];
       }
     }

package/src/table/EmptyCell.tsx

@@ -22,26 +22,13 @@
  */
 
 import { useMemo } from "react";
-import { useTableContext } from "./Context";
-import {
-  COL_DEFAULT_WIDTH,
-  COL_MAX_WIDTH,
-  COL_MIN_WIDTH,
-  type TableColumn,
-} from "./types";
+import { useTableContext } from "./context";
+import { COL_DEFAULT_WIDTH, COL_MAX_WIDTH, COL_MIN_WIDTH, type TableColumn } from "./types";
 
-export const EmptyCell = ({
-  id,
-  width: _width,
-  maxWidth,
-  minWidth,
-}: TableColumn) => {
+export const EmptyCell = ({ id, width: _width, maxWidth, minWidth }: TableColumn) => {
   const { widths } = useTableContext();
 
-  const width = useMemo(
-    () => widths.get(id.toString()) ?? _width,
-    [widths, id, _width],
-  );
+  const width = useMemo(() => widths.get(id.toString()) ?? _width, [widths, id, _width]);
 
   return (
     <div

package/src/table/HeaderCell.tsx

@@ -21,27 +21,12 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import {
-  Button,
-  Divider,
-  DropdownTool,
-  getIconProps,
-  Icon,
-  Menu,
-  MenuItem,
-  Tooltip,
-} from "@react-fabric/core";
+import { Button, Divider, DropdownTool, getIconProps, Icon, Menu, MenuItem, Tooltip } from "@react-fabric/core";
 import { isEmpty } from "@react-fabric/utilities";
 import { useCallback, useMemo } from "react";
 import { ColumnFilters } from "./ColumnFilters";
-import { useTableContext } from "./Context";
-import {
-  COL_DEFAULT_WIDTH,
-  COL_MAX_WIDTH,
-  COL_MIN_WIDTH,
-  type TableColumn,
-  type TableProps,
-} from "./types";
+import { useTableContext } from "./context";
+import { COL_DEFAULT_WIDTH, COL_MAX_WIDTH, COL_MIN_WIDTH, type TableColumn, type TableProps } from "./types";
 
 export const HeaderCell = ({
   id,
@@ -66,18 +51,14 @@ export const HeaderCell = ({
 }: TableColumn & Pick<TableProps, "sort" | "onSort" | "onFilter">) => {
   const { startResize, widths } = useTableContext();
 
-  const width = useMemo(
-    () => widths.get(id.toString()) ?? _width,
-    [widths, _width, id],
-  );
+  const width = useMemo(() => widths.get(id.toString()) ?? _width, [widths, _width, id]);
 
   const handleSort = useCallback(
     (order?: "asc" | "desc") => {
       sortable &&
         onSort?.({
           id: id.toString(),
-          order:
-            order ?? (sort?.id === id && sort.order === "asc" ? "desc" : "asc"),
+          order: order ?? (sort?.id === id && sort.order === "asc" ? "desc" : "asc"),
         });
     },
     [onSort, sort, sortable],
@@ -87,12 +68,7 @@ export const HeaderCell = ({
     let ret = [];
     if (filterable && (dataType ?? filterOptions)) {
       ret.push(
-        <Menu
-          key="filters"
-          label="Filter"
-          icon={filter ? "icon-[mdi--check]" : ""}
-          trigger="click"
-        >
+        <Menu key="filters" label="Filter" icon={filter ? "icon-[mdi--check]" : ""} trigger="click">
           <ColumnFilters
             type={dataType}
             list={filterOptions}
@@ -104,12 +80,7 @@ export const HeaderCell = ({
     }
     if (sortable) {
       ret.push(
-        <MenuItem
-          key="sort-asc"
-          label="Sort ascending"
-          icon="icon-[mdi--sort-ascending]"
-          onClick={() => handleSort("asc")}
-        />,
+        <MenuItem key="sort-asc" label="Sort ascending" icon="icon-[mdi--sort-ascending]" onClick={() => handleSort("asc")} />,
         <MenuItem
           key="sort-desc"
           label="Sort descending"
@@ -149,7 +120,7 @@ export const HeaderCell = ({
       }}
     >
       <Tooltip content={tooltip ?? label} disabled={!(tooltip ?? label)}>
-        <div className="flex-initial px-2 py-1 text-sm truncate sticky start-0">
+        <div className="flex-initial px-2 py-1 text-sm truncate sticky inset-s-0">
           {icon && <Icon {...getIconProps(icon)} />}
           <span>{label ?? " "}</span>
         </div>
@@ -180,10 +151,7 @@ export const HeaderCell = ({
         <div
           role="none"
           className="cursor-col-resize border-e bg-transparent border-tint-200 w-[5px] self-stretch"
-          onMouseDown={(e) =>
-            e.currentTarget.parentElement &&
-            startResize(e.currentTarget.parentElement)
-          }
+          onMouseDown={(e) => e.currentTarget.parentElement && startResize(e.currentTarget.parentElement)}
         />
       )}
     </div>