@react-fabric/data 1.0.0-beta.8 → 1.0.1

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 function 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
@@ -54,4 +41,4 @@ export const EmptyCell = ({
       }}
     />
   );
-};
+}

package/src/table/HeaderCell.tsx

@@ -21,33 +21,23 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import {
-  CoreIcons,
-  DropdownTool,
-  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 { useTableContext } from "./Context";
-import {
-  COL_DEFAULT_WIDTH,
-  COL_MAX_WIDTH,
-  COL_MIN_WIDTH,
-  type TableColumn,
-  type TableProps,
-} from "./types";
+import { ColumnFilters } from "./ColumnFilters";
+import { useTableContext } from "./context";
+import { COL_DEFAULT_WIDTH, COL_MAX_WIDTH, COL_MIN_WIDTH, type TableColumn, type TableProps } from "./types";
 
-export const HeaderCell = ({
+export function HeaderCell({
   id,
+  field,
+  dataType,
   label,
   icon,
-  iconBg,
-  iconColor,
-  rtlFlip,
   actions,
-  locked,
+  filter,
+  filterable,
+  filterOptions,
   tooltip,
   sortable,
   resizable,
@@ -56,47 +46,72 @@ export const HeaderCell = ({
   minWidth,
   sort,
   onSort,
-}: TableColumn & Pick<TableProps, "sort" | "onSort">) => {
+  onFilter,
+}: 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(() => {
-    sortable &&
-      onSort?.({
-        id: id.toString(),
-        order: sort?.id === id && sort.order === "asc" ? "desc" : "asc",
-      });
-  }, [onSort, name, sort, sortable]);
+  const handleSort = useCallback(
+    (order?: "asc" | "desc") => {
+      if (sortable)
+        onSort?.({
+          id: id.toString(),
+          order: order ?? (sort?.id === id && sort.order === "asc" ? "desc" : "asc"),
+        });
+    },
+    [id, onSort, sort, sortable],
+  );
 
   const menus = useMemo(() => {
-    const ret = [];
+    let ret = [];
+    if (filterable && (dataType ?? filterOptions)) {
+      ret.push(
+        <Menu key="filters" label="Filter" icon={filter ? "icon-[mdi--check]" : ""} trigger="click">
+          <ColumnFilters
+            type={dataType}
+            list={filterOptions}
+            filter={filter}
+            onFilter={(value) => onFilter?.(field ?? id, value)}
+          />
+        </Menu>,
+      );
+    }
     if (sortable) {
       ret.push(
-        <MenuItem
-          key="sort-asc"
-          label="Sort ascending"
-          icon={CoreIcons.sortAsc}
-        />,
+        <MenuItem key="sort-asc" label="Sort ascending" 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")}
         />,
       );
     }
+    if (actions) {
+      ret.push(<Divider key="div" />);
+      ret.push(...actions);
+    }
+    if (ret.length === 1) {
+      ret = [
+        <ColumnFilters
+          key="filters"
+          type={dataType}
+          list={filterOptions}
+          filter={filter}
+          onFilter={(value) => onFilter?.(field ?? id, value)}
+        />,
+      ];
+    }
     return ret;
-  }, [sortable]);
+  }, [filterable, dataType, filterOptions, sortable, actions, filter, onFilter, field, id, handleSort]);
 
   return (
     <div
       role="none"
       data-id={id}
-      onClick={handleSort}
-      className="group font-medium border-e flex flex-nowrap text-start items-center table-header-cell"
+      onClick={() => handleSort()}
+      className="group/tool font-medium border-e flex flex-nowrap text-start items-center table-header-cell"
       style={{
         width: width ?? COL_DEFAULT_WIDTH,
         minWidth: minWidth ?? COL_MIN_WIDTH,
@@ -104,10 +119,8 @@ export const HeaderCell = ({
       }}
     >
       <Tooltip content={tooltip ?? label} disabled={!(tooltip ?? label)}>
-        <div className="flex-initial px-2 py-1 text-sm truncate sticky start-0">
-          {icon && (
-            <Icon icon={icon} bg={iconBg} color={iconColor} rtlFlip={rtlFlip} />
-          )}
+        <div className="flex-initial px-2 py-1 text-sm truncate sticky inset-s-0">
+          {icon && <Icon {...getIconProps(icon)} />}
           <span>{label ?? " "}</span>
         </div>
       </Tooltip>
@@ -123,16 +136,22 @@ export const HeaderCell = ({
           <Menu className="text-sm">{menus}</Menu>
         </DropdownTool>
       )}
+      {filterable && !isEmpty(filter) && (
+        <Button
+          size="sm"
+          variant="link"
+          aria-label="clear filter"
+          icon="icon-[mdi--filter-remove]"
+          onClick={(e) => (e?.stopPropagation(), onFilter?.(id))}
+        />
+      )}
       {resizable && (
         <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)
-          }
+          className="cursor-col-resize border-e bg-transparent border-tint-200 w-[calc(5px)] self-stretch"
+          onMouseDown={(e) => e.currentTarget.parentElement && startResize(e.currentTarget.parentElement)}
         />
       )}
     </div>
   );
-};
+}

package/src/table/HtmlTable.tsx

@@ -0,0 +1,106 @@
+/*
+ * 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 { cn, getByPath } from "@react-fabric/utilities";
+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: AnyObject, 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 function 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 bg-dimmed">
+          <tr>
+            {columns.map((col, idx) => (
+              <th
+                // eslint-disable-next-line @eslint-react/no-array-index-key
+                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) => (
+            // eslint-disable-next-line @eslint-react/no-array-index-key
+            <tr key={idx}>
+              {columns.map((col, cidx) => (
+                <td
+                  // eslint-disable-next-line @eslint-react/no-array-index-key
+                  key={`${idx}-${cidx}`}
+                  className={cn("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>
+        {paginationSize > 0 && (
+          <tfoot className="sticky bottom-0 bg-dimmed z-1">
+            <tr>
+              <td colSpan={columns.length} className="text-end py-1">
+                <Pagination minimal {...paginator} />
+              </td>
+            </tr>
+          </tfoot>
+        )}
+      </table>
+    </div>
+  );
+}

package/src/table/{Context.tsx → Provider.tsx}

@@ -22,30 +22,18 @@
  */
 
 import { type ChildrenProp } from "@react-fabric/core/dist/types/types";
-import {
-  createContext,
-  useCallback,
-  useContext,
-  useRef,
-  useState,
-} from "react";
-import { useResizer } from "./useResizer";
+import { useCallback, useRef, useState } from "react";
+import { TableContext } from "./context";
+import { startResizer } from "./useResizer";
 
-interface Context {
-  widths: Map<string, number>;
-  startResize: (col: HTMLElement) => void;
-}
-
-const TableContext = createContext<Context>({} as Context);
-
-export const TableProvider = ({ children }: ChildrenProp) => {
+export function TableProvider({ children }: ChildrenProp) {
   const ghostRef = useRef<HTMLDivElement>(null);
-  const [widths, setWidths] = useState<Map<string, number>>(new Map());
+  const [widths, setWidths] = useState<Map<string, number>>(() => new Map());
   const startResize = useCallback(
     (col: HTMLElement) => {
       if (col) {
-        ghostRef.current != null &&
-          useResizer(col, ghostRef.current, (width) => {
+        if (ghostRef.current != null)
+          startResizer(col, ghostRef.current, (width) => {
             setWidths(new Map(widths.set(col.dataset.id ?? "", width)));
           });
       }
@@ -54,17 +42,12 @@ export const TableProvider = ({ children }: ChildrenProp) => {
   );
 
   return (
-    <TableContext.Provider value={{ startResize, widths }}>
+    <TableContext value={{ startResize, widths }}>
       {children}
 
-      <div
-        className="absolute inset-0 hidden z-20 cursor-col-resize"
-        ref={ghostRef}
-      >
+      <div className="absolute inset-0 hidden z-20 cursor-col-resize" ref={ghostRef}>
         <div className="absolute inset-y-0 bg-muted opacity-50 border-primary border-e-2" />
       </div>
-    </TableContext.Provider>
+    </TableContext>
   );
-};
-
-export const useTableContext = () => useContext(TableContext);
+}

package/src/table/Table.tsx

@@ -21,49 +21,55 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import { EmptyContent, Loading, useDebounce } from "@react-fabric/core";
-import { debounce } from "@react-fabric/utilities";
-import {
-  useEffect,
-  useImperativeHandle,
-  useLayoutEffect,
-  useMemo,
-  useRef,
-} from "react";
+import { EmptyContent, Icon, LoadingLine, useDebounce } from "@react-fabric/core";
+import { cn, debounce } from "@react-fabric/utilities";
+import { useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef } from "react";
 import { useTranslation } from "react-i18next";
 import { AddColumn } from "./AddColumn";
 import { BodyRow } from "./BodyRow";
 import { CheckboxCell } from "./CheckboxCell";
-import { TableProvider } from "./Context";
 import { EmptyCell } from "./EmptyCell";
 import { HeaderCell } from "./HeaderCell";
+import { TableProvider } from "./Provider";
 import { type TableProps } from "./types";
 import { useTableColumns } from "./useTableColumns";
 import { useVirtualTable } from "./useVirtualTable";
 
-export const Table = <T extends KeyValue = KeyValue>({
+/**
+ * Table component for displaying data in a tabular format with features like sorting, filtering, and virtual scrolling.
+ * It supports expandable rows, checkable rows, and customizable columns.
+ * The component is designed to handle large datasets efficiently by rendering only the visible rows.
+ * It also provides a way to manage column visibility and allows for custom rendering of group headers.
+ * Uses TanStack's `useVirtual` for virtualization and React's `useMemo` for performance optimization.
+ *
+ * @see {@link https://tanstack.com/table/v8/docs/api/virtual}
+ */
+export function Table<T extends KeyValue = KeyValue>({
   ref,
   data,
   columns,
-  keyProperty,
+  keyProperty = "id" as never,
+  groupProperty,
   checkableRows,
   initialScroll,
   hideableColumns,
   sort,
   loading,
+  checked,
   emptyDisplay,
+  groupRenderer,
   canExpand,
   children,
   onSort,
+  onFilter,
   onScroll,
   onRowClick,
   onCheckedChanged,
-}: TableProps<T>) => {
+  total = 0,
+  onLoadMore,
+}: TableProps<T>) {
   const { t } = useTranslation("data");
-  const fireCheckChanged = useDebounce(
-    (checkedIds: Array<keyof T>) => onCheckedChanged?.(checkedIds),
-    [],
-  );
+  const fireCheckChanged = useDebounce((checkedIds: Array<keyof T>) => onCheckedChanged?.(checkedIds), []);
 
   const { state, onHide } = useTableColumns(columns);
   const {
@@ -72,29 +78,38 @@ export const Table = <T extends KeyValue = KeyValue>({
     top,
     checkState,
     virtualizer,
+    hasActiveSticky,
     toggleExpand,
     toggleChecked,
     toggleAllChecked,
+    toggleGroupExpand,
     getData,
     totalSize,
+    isActiveSticky,
     measureElement,
-  } = useVirtualTable(data, keyProperty, fireCheckChanged);
-  const refBody = useRef<HTMLDivElement>(null);
+  } = useVirtualTable(data, {
+    checked,
+    keyProperty,
+    groupProperty,
+    total,
+    loading,
+    onLoadMore,
+    onCheckChanged: fireCheckChanged,
+  });
+  const bodyRef = useRef<HTMLDivElement>(null);
 
-  const wrapperStart = useMemo(
-    () => "bg-inherit sticky start-0 flex flex-nowrap z-1",
-    [],
-  );
-  const wrapperEnd = useMemo(
-    () => "bg-inherit sticky end-0 flex flex-nowrap z-1 border-s -ms-px",
-    [],
-  );
+  const wrapperStart = useMemo(() => "bg-inherit sticky start-0 flex flex-nowrap z-1", []);
+  const wrapperEnd = useMemo(() => "bg-inherit sticky end-0 flex flex-nowrap z-1 border-s -ms-px", []);
 
   useLayoutEffect(() => {
-    setTimeout(() => {
-      initialScroll &&
-        virtualizer.scrollToIndex(initialScroll, { align: "start" });
+    const tmr = setTimeout(() => {
+      if (initialScroll) virtualizer.scrollToIndex(initialScroll, { align: "start" });
     }, 100);
+
+    return () => {
+      clearTimeout(tmr);
+    };
+    // eslint-disable-next-line @eslint-react/exhaustive-deps
   }, []);
 
   useImperativeHandle(
@@ -104,24 +119,19 @@ export const Table = <T extends KeyValue = KeyValue>({
         virtualizer.scrollToIndex(row, { align: "start" });
       },
       hilight(row) {
-        scrollerRef.current
-          ?.querySelector(".hilight")
-          ?.classList.remove("hilight", "ring-1");
+        scrollerRef.current?.querySelector(".hilight")?.classList.remove("hilight", "ring-1");
         virtualizer.scrollToIndex(Math.floor(row), {
           align: "start",
         });
         setTimeout(() => {
-          scrollerRef.current
-            ?.querySelector(`[data-index="${row}"]`)
-            ?.classList.add("hilight", "ring-1");
+          scrollerRef.current?.querySelector(`[data-index="${row}"]`)?.classList.add("hilight", "ring-1");
         }, 100);
       },
       unhilight() {
-        scrollerRef.current
-          ?.querySelector(".hilight")
-          ?.classList.remove("hilight", "ring-1");
+        scrollerRef.current?.querySelector(".hilight")?.classList.remove("hilight", "ring-1");
       },
     }),
+    // eslint-disable-next-line @eslint-react/exhaustive-deps
     [],
   );
 
@@ -133,7 +143,7 @@ export const Table = <T extends KeyValue = KeyValue>({
     return () => {
       handle.cancel();
     };
-  }, [top]);
+  }, [onScroll, top]);
 
   return (
     <TableProvider>
@@ -142,62 +152,73 @@ export const Table = <T extends KeyValue = KeyValue>({
         style={{
           gridTemplate: `"head" auto "loader" auto "content" 1fr "foot" auto/1fr`,
         }}
+        data-ref="tableScroller"
         ref={scrollerRef}
       >
-        <div className="bg-base font-medium sticky top-0 area-head border-b select-none flex flex-nowrap z-2">
+        <div
+          data-ref="tableHeader"
+          className="bg-default font-medium sticky top-0 h-8 area-head border-b select-none flex flex-nowrap z-3"
+        >
           <div className={wrapperStart}>
             {canExpand && <div className="w-6" />}
-            {checkableRows && (
-              <CheckboxCell
-                state={checkState.allChecked}
-                onClick={toggleAllChecked}
-              />
-            )}
+            {checkableRows && <CheckboxCell state={checkState.allChecked} onClick={toggleAllChecked} />}
             {state.start?.map((col, idx) => (
-              <HeaderCell key={idx} {...col} sort={sort} onSort={onSort} />
+              // eslint-disable-next-line @eslint-react/no-array-index-key
+              <HeaderCell key={idx} {...col} sort={sort} onSort={onSort} onFilter={onFilter} />
             ))}
           </div>
           {state.cols?.map((col, idx) => (
-            <HeaderCell key={idx} {...col} sort={sort} onSort={onSort} />
+            // eslint-disable-next-line @eslint-react/no-array-index-key
+            <HeaderCell key={idx} {...col} sort={sort} onSort={onSort} onFilter={onFilter} />
           ))}
           <div className={wrapperEnd}>
             {state.end?.map((col, idx) => (
-              <HeaderCell key={idx} {...col} sort={sort} onSort={onSort} />
+              // eslint-disable-next-line @eslint-react/no-array-index-key
+              <HeaderCell key={idx} {...col} sort={sort} onSort={onSort} onFilter={onFilter} />
             ))}
 
-            {hideableColumns && (
-              <AddColumn
-                onClick={onHide}
-                columns={state.columns.filter((col) => col.hideable !== false)}
-              />
-            )}
+            {hideableColumns && <AddColumn onClick={onHide} columns={state.columns.filter((col) => col.hideable !== false)} />}
           </div>
         </div>
-        {loading && <Loading />}
+        {loading && <LoadingLine />}
         {data.length > 0 && (
-          <div
-            className="area-content flex flex-col flex-nowrap"
-            style={{ height: totalSize() }}
-            ref={refBody}
-          >
-            <div style={{ height: items[0]?.start }} />
+          <div className="area-content flex flex-col flex-nowrap min-h-full" style={{ height: totalSize() }} ref={bodyRef}>
+            <div
+              style={{
+                height: items[hasActiveSticky ? 1 : 0]?.start,
+              }}
+            />
             {items.map(({ index, key }) => {
               const data = getData(index);
-              return (
+              return "__GROUP__" in data ? (
+                <div
+                  key={key}
+                  ref={measureElement}
+                  data-index={index}
+                  className={cn(
+                    "text-md bg-default 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 as never)}
+                >
+                  <div className={cn("px-2 py-1 flex items-center gap-1 z-2 sticky inset-s-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
-                  rowKey={key}
+                  rowKey={key.toString()}
                   index={index}
                   checkableRows={checkableRows}
-                  checked={
-                    keyProperty &&
-                    checkState.checked.includes(data[keyProperty])
-                      ? 1
-                      : 0
-                  }
-                  expanded={
-                    !!keyProperty &&
-                    checkState.expanded.includes(data[keyProperty])
-                  }
+                  checked={keyProperty && checkState.checked.includes(data[keyProperty]) ? 1 : 0}
+                  expanded={!!keyProperty && checkState.expanded.includes(data[keyProperty])}
                   data={data}
                   hideableColumns={hideableColumns}
                   keyProperty={keyProperty}
@@ -237,14 +258,8 @@ export const Table = <T extends KeyValue = KeyValue>({
         )}
         {!loading &&
           data.length === 0 &&
-          (emptyDisplay ?? (
-            <EmptyContent
-              size="sm"
-              className="bg-dimmed"
-              message={t("datagrid.empty")}
-            />
-          ))}
+          (emptyDisplay ?? <EmptyContent size="sm" className="bg-dimmed" message={t("datagrid.empty")} />)}
       </div>
     </TableProvider>
   );
-};
+}