@react-fabric/data 1.0.0-beta.60 → 1.0.0-beta.62

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

@@ -20,8 +20,8 @@ import { type TreePanelProps } from "./types";
  *   selectable={true}
  *   matcher={(item, query) => item.name.toLowerCase().includes(query.toLowerCase())}
  *   filterPlaceholder="Search..."
- *   defaultLeafIcon={<Icon icon={CoreIcons.file} />}
- *   defaultNodeIcon={<Icon icon={CoreIcons.folder} />}
+ *   defaultLeafIcon={<Icon icon="icon-[mdi--file]" />}
+ *   defaultNodeIcon={<Icon icon="icon-[mdi--folder]" />}
  *   expander="caret"
  *   onChecked={(checkedItems) => console.log(checkedItems)}
  *   onLoad={(id) => console.log(`Load children for ${id}`)}

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

@@ -183,6 +183,4 @@ interface BaseTreePanelProps<T extends KeyValue = KeyValue> extends TestProps, R
     leafClassName?: string;
     nodeClassName?: string;
 }
-export declare const iconExpandAll = "M12.984 9v6h3l-3.984 3.984-3.984-3.984h3v-6h-3l3.984-3.984 3.984 3.984h-3zM3.984 2.016h16.031v1.969h-16.031v-1.969zM3.984 20.016h16.031v1.969h-16.031v-1.969z";
-export declare const iconCollapseAll = "M3.984 11.016h16.031v1.969h-16.031v-1.969zM15.984 5.016l-3.984 3.984-3.984-3.984h3v-4.031h1.969v4.031h3zM8.016 18.984l3.984-3.984 3.984 3.984h-3v4.031h-1.969v-4.031h-3z";
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-fabric/data",
-  "version": "1.0.0-beta.60",
+  "version": "1.0.0-beta.62",
   "description": "RUF: Data package",
   "author": "Adarsh Pastakia <adarshpastakia@outlook.com>",
   "license": "MIT",
@@ -35,10 +35,10 @@
     "watch": "npm-run-all -p watch:rollup watch:dts"
   },
   "dependencies": {
-    "@react-fabric/core": "^1.0.0-beta.60",
-    "@react-fabric/date": "^1.0.0-beta.60",
-    "@react-fabric/form": "^1.0.0-beta.60",
-    "@react-fabric/utilities": "^1.0.0-beta.60",
+    "@react-fabric/core": "^1.0.0-beta.62",
+    "@react-fabric/date": "^1.0.0-beta.62",
+    "@react-fabric/form": "^1.0.0-beta.62",
+    "@react-fabric/utilities": "^1.0.0-beta.62",
     "@tanstack/react-virtual": "~3.13.12",
     "classnames": "~2.5.1",
     "color": "~5.0.2",
@@ -54,5 +54,5 @@
     "node": ">=18.12.0",
     "npm": ">=8.19.0"
   },
-  "gitHead": "a79f053ee7e13422c06d7d9c35d4f0c2610cdf5d"
+  "gitHead": "9dce2fd9bb753d67e3f8adbf50be257b4bc64242"
 }

package/src/checklist/CheckList.tsx

@@ -21,7 +21,7 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import { Badge, CoreIcons, EmptyContent, Icon } from "@react-fabric/core";
+import { Badge, EmptyContent, Icon } from "@react-fabric/core";
 import {
   type BadgeType,
   type TestProps,
@@ -106,7 +106,11 @@ const CheckItem: FC<
           data-type="checkbox"
           className="ax-checkList__checkbox"
           data-selected={selected === 1}
-          icon={selected ? CoreIcons.checkboxInt : CoreIcons.checkboxOff}
+          icon={
+            selected
+              ? "icon-[mdi--checkbox-marked]"
+              : "icon-[mdi--checkbox-blank-outline]"
+          }
         />
       )}
       {allowNegative && (
@@ -116,10 +120,10 @@ const CheckItem: FC<
             className="ax-checkList__checkbox"
             icon={
               selected === 1
-                ? CoreIcons.expand
+                ? "icon-[mdi--plus-box-outline]"
                 : selected === -1
-                  ? CoreIcons.collapse
-                  : CoreIcons.checkboxOff
+                  ? "icon-[mdi--minus-box-outline]"
+                  : "icon-[mdi--checkbox-blank-outline]"
             }
             data-selected={selected}
           />
@@ -127,14 +131,20 @@ const CheckItem: FC<
             <Icon
               data-type="positive"
               onClick={(e) => [(onClick(id, false), e.stopPropagation())]}
-              icon={selected === 1 ? CoreIcons.expandActive : CoreIcons.expand}
+              icon={
+                selected === 1
+                  ? "icon-[mdi--plus-box]"
+                  : "icon-[mdi--plus-box-outline]"
+              }
               data-selected={selected === 1}
             />
             <Icon
               data-type="negative"
               onClick={(e) => [(onClick(id, true), e.stopPropagation())]}
               icon={
-                selected === -1 ? CoreIcons.collapseActive : CoreIcons.collapse
+                selected === -1
+                  ? "icon-[mdi--minus-box]"
+                  : "icon-[mdi--minus-box-outline]"
               }
               data-selected={selected === -1}
             />

package/src/histogram/Histogram.tsx

@@ -21,13 +21,7 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import {
-  ActionLabel,
-  Button,
-  CoreIcons,
-  EmptyContent,
-  Icon,
-} from "@react-fabric/core";
+import { ActionLabel, Button, EmptyContent, Icon } from "@react-fabric/core";
 import {
   type ColorType,
   type PaletteType,
@@ -178,7 +172,7 @@ export const Histogram = ({
                 color="danger"
                 size="sm"
                 stopPropagation
-                icon={CoreIcons.funnelMinus}
+                icon="icon-[mdi--filter-minus]"
                 aria-label="Filter Negative"
                 onClick={() => onClick?.(item.id, true)}
               />,
@@ -187,7 +181,7 @@ export const Histogram = ({
                 color="primary"
                 size="sm"
                 stopPropagation
-                icon={CoreIcons.funnelPlus}
+                icon="icon-[mdi--filter-plus]"
                 aria-label="Filter"
                 onClick={() => onClick?.(item.id)}
               />,

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

@@ -24,7 +24,6 @@
 import {
   Button,
   Copy,
-  CoreIcons,
   EmptyContent,
   Icon,
   Meter,
@@ -230,7 +229,7 @@ const JsonEntry = ({
               color="danger"
               size="xs"
               variant="link"
-              icon={CoreIcons.funnelMinus}
+              icon="icon-[mdi--filter-minus]"
               aria-label="Filter Negative"
               onClick={() => onFilter?.(pathWithoutOrdinal, actualValue, true)}
             />
@@ -239,7 +238,7 @@ const JsonEntry = ({
               color="primary"
               size="xs"
               variant="link"
-              icon={CoreIcons.funnelPlus}
+              icon="icon-[mdi--filter-plus]"
               aria-label="Filter"
               onClick={() => onFilter?.(pathWithoutOrdinal, actualValue)}
             />
@@ -277,7 +276,11 @@ const JsonEntry = ({
             {canExpand && (
               <Icon
                 rtlFlip
-                icon={expanded ? CoreIcons.chevronDown : CoreIcons.chevronRight}
+                icon={
+                  expanded
+                    ? "icon-[mdi--chevron-down]"
+                    : "icon-[mdi--chevron-right]"
+                }
               />
             )}
             {labelDisplay}

package/src/pagination/Pagination.tsx

@@ -21,7 +21,7 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import { CoreIcons, Icon } from "@react-fabric/core";
+import { Icon } from "@react-fabric/core";
 import classNames from "classnames";
 import { Fragment, memo, useMemo } from "react";
 
@@ -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,20 +121,20 @@ 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",
           )}
         >
-          <Icon icon={CoreIcons.chevronsLeft} rtlFlip />
+          <Icon icon="icon-[mdi--chevron-double-left]" rtlFlip />
         </button>
         <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",
           )}
         >
-          <Icon icon={CoreIcons.chevronLeft} rtlFlip />
+          <Icon icon="icon-[mdi--chevron-left]" rtlFlip />
         </button>
         {!minimal && pageBody}
         {minimal && (
@@ -145,20 +145,20 @@ 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",
           )}
         >
-          <Icon icon={CoreIcons.chevronRight} rtlFlip />
+          <Icon icon="icon-[mdi--chevron-right]" rtlFlip />
         </button>
         <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",
           )}
         >
-          <Icon icon={CoreIcons.chevronsRight} rtlFlip />
+          <Icon icon="icon-[mdi--chevron-double-right]" rtlFlip />
         </button>
       </div>
     );

package/src/table/AddColumn.tsx

@@ -21,7 +21,7 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import { CoreIcons, Dropdown, Icon, Menu, MenuItem } from "@react-fabric/core";
+import { Dropdown, Icon, Menu, MenuItem } from "@react-fabric/core";
 import { type TableColumn } from "./types";
 
 export const AddColumn = ({
@@ -35,7 +35,7 @@ export const AddColumn = ({
     <div className="group font-medium w-6 flex flex-nowrap text-start items-center">
       <Dropdown placement="bottom-end">
         <Icon
-          icon={CoreIcons.insert}
+          icon="icon-[mdi--plus-circle-outline]"
           className="p-1 rounded-t rounded-b-none hover:outline"
         />
         <Menu className="text-sm" onClick={onClick}>
@@ -45,7 +45,7 @@ export const AddColumn = ({
               id={String(col.id)}
               data-dropdown-dismiss="false"
               label={`${col.label ?? String(col.id)}`}
-              icon={!col.hidden ? CoreIcons.tick : ""}
+              icon={!col.hidden ? "icon-[mdi--check]" : ""}
             />
           ))}
         </Menu>

package/src/table/BodyCell.tsx

@@ -22,7 +22,13 @@
  */
 
 import { DateDisplay } from "@react-fabric/date";
-import { Format, getByPath, 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";
@@ -55,11 +61,14 @@ export const BodyCell = ({
       return column.renderer(value, item, index);
     }
     if (column.dataType === "boolean") {
-      const map = column.valueMap ?? { true: "Yes", false: "no" };
+      const map = column.valueMap ?? { true: "Yes", false: "No" };
       return map[`${isTrue(value) ? "true" : "false"}`];
     }
     if (column.valueMap != null) {
-      if (column.dataType === "string" && value in column.valueMap) {
+      if (
+        ["number", "string"].includes(column.dataType ?? "string") &&
+        value in column.valueMap
+      ) {
         return column.valueMap[value];
       }
     }
@@ -69,6 +78,12 @@ export const BodyCell = ({
     if (column.dataType === "number") {
       return Format.number(value, column.format);
     }
+    if (isObject(value)) {
+      return JSON.stringify(value);
+    }
+    if (isArray(value)) {
+      return value.join(", ");
+    }
     return value ?? "";
   }, [item, column]);
 

package/src/table/BodyRow.tsx

@@ -21,11 +21,11 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
+import { Icon } from "@react-fabric/core";
 import classNames from "classnames";
 import { BodyCell } from "./BodyCell";
 import { CheckboxCell } from "./CheckboxCell";
 import { type TableColumn } from "./types";
-import { CoreIcons, Icon } from "@react-fabric/core";
 
 export const BodyRow = ({
   rowKey,
@@ -94,7 +94,9 @@ export const BodyRow = ({
             >
               <Icon
                 className="p-1 text-tint-700 hover:text-primary-600"
-                icon={expanded ? CoreIcons.collapse : CoreIcons.expand}
+                icon={
+                  expanded ? "icon-[mdi--minus-box]" : "icon-[mdi--plus-box]"
+                }
                 onClick={(e) => [
                   keyProperty && toggleExpand(data[keyProperty]),
                   e.stopPropagation(),

package/src/table/CheckboxCell.tsx

@@ -21,7 +21,7 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import { CoreIcons, Icon } from "@react-fabric/core";
+import { Icon } from "@react-fabric/core";
 
 export const CheckboxCell = ({
   state,
@@ -35,10 +35,10 @@ export const CheckboxCell = ({
       <Icon
         icon={
           state === 2
-            ? CoreIcons.checkboxInt
+            ? "icon-[mdi--checkbox-intermediate]"
             : state === 1
-              ? CoreIcons.checkboxOn
-              : CoreIcons.checkboxOff
+              ? "icon-[mdi--checkbox-marked]"
+              : "icon-[mdi--checkbox-blank-outline]"
         }
         className="p-1 text-tint-700 hover:text-primary-600"
         onClick={(e) => [onClick?.(), e.stopPropagation()]}

package/src/table/HeaderCell.tsx

@@ -23,7 +23,6 @@
 
 import {
   Button,
-  CoreIcons,
   Divider,
   DropdownTool,
   getIconProps,
@@ -91,7 +90,7 @@ export const HeaderCell = ({
         <Menu
           key="filters"
           label="Filter"
-          icon={filter ? CoreIcons.tick : ""}
+          icon={filter ? "icon-[mdi--check]" : ""}
           trigger="click"
         >
           <ColumnFilters
@@ -108,13 +107,13 @@ export const HeaderCell = ({
         <MenuItem
           key="sort-asc"
           label="Sort ascending"
-          icon={CoreIcons.sortAsc}
+          icon="icon-[mdi--sort-ascending]"
           onClick={() => handleSort("asc")}
         />,
         <MenuItem
           key="sort-desc"
           label="Sort descending"
-          icon={CoreIcons.sortDesc}
+          icon="icon-[mdi--sort-descending]"
           onClick={() => handleSort("desc")}
         />,
       );
@@ -173,7 +172,7 @@ export const HeaderCell = ({
           variant="link"
           aria-label="clear filter"
           stopPropagation
-          icon={CoreIcons.funnelRemove}
+          icon="icon-[mdi--filter-remove]"
           onClick={() => onFilter?.(id)}
         />
       )}

package/src/table/HtmlTable.tsx

@@ -0,0 +1,128 @@
+/*
+ * React Fabric
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2026 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { Footer } from "@react-fabric/core";
+import { getByPath } from "@react-fabric/utilities";
+import classNames from "classnames";
+import { useMemo } from "react";
+import { usePagination } from "../hooks/usePagination";
+import { Pagination } from "../pagination/Pagination";
+
+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 const HtmlTable = <T extends KeyValue = KeyValue>({
+  data,
+  columns,
+  paginationSize = 25,
+  className,
+}: Props<T>) => {
+  const paginator = usePagination({
+    totalRecords: data.length,
+    perPage: paginationSize,
+  });
+
+  const startIndex = useMemo(
+    () => paginator.page * paginationSize,
+    [paginator.page, paginationSize],
+  );
+
+  const dataPage = useMemo(
+    () =>
+      paginationSize > 0
+        ? data.slice(startIndex, startIndex + paginationSize)
+        : data,
+    [data, paginationSize, startIndex],
+  );
+
+  return (
+    <div className={className}>
+      <table className="table-fixed border-spacing-1 border-separate w-full text-sm">
+        <thead className="sticky top-0 z-1">
+          <tr>
+            {columns.map((col, idx) => (
+              <th
+                key={idx}
+                className="text-start truncate bg-accent-100 px-2 py-1 font-medium text-accent-800"
+                style={{ width: col.width, maxWidth: col.maxWidth }}
+              >
+                {col.headRenderer ?? col.label ?? " "}
+              </th>
+            ))}
+          </tr>
+        </thead>
+        <tbody className="bg-alternate">
+          {dataPage.map((row, idx) => (
+            <tr key={idx}>
+              {columns.map((col, cidx) => (
+                <td
+                  key={`${idx}-${cidx}`}
+                  className={classNames(
+                    "px-2 py-1 truncate",
+                    col.align === "center" && "text-center",
+                    col.align === "end" && "text-end",
+                    col.className,
+                  )}
+                  style={{ width: col.width, maxWidth: col.maxWidth }}
+                >
+                  {col.renderer?.(
+                    getByPath(row, col.id.toString()),
+                    row,
+                    startIndex + idx,
+                  ) ?? getByPath(row, col.id.toString())}
+                </td>
+              ))}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+      {paginationSize > 0 && (
+        <Footer
+          flex
+          justify="end"
+          className="px-2 py-1 sticky bottom-0 bg-tint-50"
+        >
+          <Pagination minimal {...paginator} />
+        </Footer>
+      )}
+    </div>
+  );
+};

package/src/table/Table.tsx

@@ -22,10 +22,9 @@
  */
 
 import {
-  CoreIcons,
   EmptyContent,
   Icon,
-  Loading,
+  LoadingLine,
   useDebounce,
 } from "@react-fabric/core";
 import { debounce } from "@react-fabric/utilities";
@@ -65,7 +64,7 @@ export const Table = <T extends KeyValue = KeyValue>({
   ref,
   data,
   columns,
-  keyProperty = "id",
+  keyProperty = "id" as any,
   groupProperty,
   checkableRows,
   initialScroll,
@@ -232,7 +231,7 @@ export const Table = <T extends KeyValue = KeyValue>({
             )}
           </div>
         </div>
-        {loading && <Loading />}
+        {loading && <LoadingLine />}
         {data.length > 0 && (
           <div
             className="area-content flex flex-col flex-nowrap min-h-full"
@@ -252,24 +251,32 @@ export const Table = <T extends KeyValue = KeyValue>({
                   ref={measureElement}
                   data-index={index}
                   className={classNames(
-                    "px-2 py-1 text-md bg-base border-y border-tint-100 cursor-pointer flex items-center gap-1 z-2",
+                    "text-md bg-base border-y border-tint-100 border-t-0 cursor-pointer flex items-center justify-start gap-1 z-2",
                     isActiveSticky(index) && "sticky top-8",
                   )}
                   role="none"
                   onClick={() => toggleGroupExpand(data.key)}
                 >
-                  <Icon
-                    rtlFlip
-                    icon={
-                      data.open ? CoreIcons.chevronDown : CoreIcons.chevronRight
-                    }
-                  />
-                  {groupRenderer?.(data) ?? (
-                    <div className="flex gap-1 items-center">
-                      <span>{data.key}</span>
-                      <span className="text-sm">({data.itemCount})</span>
-                    </div>
-                  )}
+                  <div
+                    className={classNames(
+                      "px-2 py-1 flex items-center gap-1 z-2 sticky start-0",
+                    )}
+                  >
+                    <Icon
+                      rtlFlip
+                      icon={
+                        data.open
+                          ? "icon-[mdi--chevron-down]"
+                          : "icon-[mdi--chevron-right]"
+                      }
+                    />
+                    {groupRenderer?.(data) ?? (
+                      <div className="flex gap-1 items-center">
+                        <span>{data.key}</span>
+                        <span className="text-sm">({data.itemCount})</span>
+                      </div>
+                    )}
+                  </div>
                 </div>
               ) : (
                 <BodyRow