@rttui/skin-anocca 1.0.15 → 1.0.17

package/dist/mjs/stories/ReactTanstackTableUiStoryComponent.mjs

@@ -0,0 +1,110 @@
+// packages/skin-anocca/src/stories/ReactTanstackTableUiStoryComponent.tsx
+import { Box, ScopedCssBaseline, ThemeProvider, Typography } from "@mui/material";
+import { useTheme } from "@mui/material/styles";
+import {
+  decorateColumnHelper,
+  ReactTanstackTableUi as TableComponent
+} from "@rttui/core";
+import {
+  createColumnHelper,
+  useReactTable
+} from "@tanstack/react-table";
+import { HeaderPinButtons } from "../HeaderPinButtons.mjs";
+import React from "react";
+import { RowPinButtons } from "../RowPinButtons.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+var smallData = [
+  { id: "1", name: "John", age: 20, city: "New York" },
+  { id: "2", name: "Jane", age: 21, city: "Los Angeles" },
+  { id: "3", name: "Jim", age: 22, city: "Chicago" }
+];
+var bigData = Array.from({ length: 1000 }, (_, i) => ({
+  id: i.toString(),
+  name: `Person ${i}`,
+  age: 20 + i,
+  city: `City ${i}`,
+  ...Object.fromEntries(Array.from({ length: 100 }, (_2, j) => [`col${j}`, `Value ${i}-${j}`]))
+}));
+var ReactTanstackTableUi = (props) => {
+  const theme = useTheme();
+  const data = props.data === "big" ? bigData : smallData;
+  const columns = React.useMemo(() => {
+    const columnHelper = decorateColumnHelper(createColumnHelper(), {
+      header: (original) => /* @__PURE__ */ jsxs(Box, {
+        sx: { display: "flex", gap: 2 },
+        children: [
+          original,
+          props.enableColumnPinning && /* @__PURE__ */ jsx(HeaderPinButtons, {})
+        ]
+      })
+    });
+    const fewColumns = [
+      columnHelper.accessor("name", {
+        header: "Name",
+        cell: (info) => /* @__PURE__ */ jsxs(Box, {
+          sx: { display: "flex", gap: 2, flex: 1 },
+          children: [
+            /* @__PURE__ */ jsx(Typography, {
+              variant: "body2",
+              children: info.getValue()
+            }),
+            props.enableRowPinning && /* @__PURE__ */ jsx(Box, {
+              sx: { flexGrow: 1 }
+            }),
+            props.enableRowPinning && /* @__PURE__ */ jsx(RowPinButtons, {
+              row: info.row
+            })
+          ]
+        }),
+        meta: props.meta?.["name"]
+      }),
+      columnHelper.accessor("age", {
+        header: "Age",
+        meta: props.meta?.["age"],
+        cell: (info) => /* @__PURE__ */ jsx(Typography, {
+          variant: "body2",
+          children: info.getValue()
+        }),
+        size: 50
+      }),
+      columnHelper.accessor("city", {
+        header: "City",
+        meta: props.meta?.["city"],
+        cell: (info) => /* @__PURE__ */ jsx(Typography, {
+          variant: "body2",
+          children: info.getValue()
+        })
+      })
+    ];
+    const manyColumns = [
+      ...fewColumns,
+      ...Array.from({ length: 100 }, (_, i) => columnHelper.accessor(`col${i}`, {
+        header: `Column ${i}`,
+        cell: (info) => /* @__PURE__ */ jsx(Typography, {
+          variant: "body2",
+          children: info.getValue()
+        })
+      }))
+    ];
+    return props.columns === "few" ? fewColumns : manyColumns;
+  }, [props.columns, props.enableColumnPinning, props.enableRowPinning, props.meta]);
+  const table = useReactTable({
+    ...props,
+    data,
+    columns
+  });
+  return /* @__PURE__ */ jsx(ScopedCssBaseline, {
+    children: /* @__PURE__ */ jsx(ThemeProvider, {
+      theme,
+      children: /* @__PURE__ */ jsx(TableComponent, {
+        ...props,
+        table
+      })
+    })
+  });
+};
+export {
+  ReactTanstackTableUi
+};
+
+//# debugId=6CD65E7FABB356E264756E2164756E21

package/dist/mjs/stories/ReactTanstackTableUiStoryComponent.mjs.map

@@ -0,0 +1,10 @@
+{
+  "version": 3,
+  "sources": ["../../../src/stories/ReactTanstackTableUiStoryComponent.tsx"],
+  "sourcesContent": [
+    "import { Box, ScopedCssBaseline, ThemeProvider, Typography } from \"@mui/material\";\nimport { useTheme } from \"@mui/material/styles\";\nimport {\n  decorateColumnHelper,\n  ReactTanstackTableUi as TableComponent,\n} from \"@rttui/core\";\nimport {\n  ColumnDef,\n  ColumnMeta,\n  createColumnHelper,\n  Table,\n  TableOptions,\n  useReactTable,\n} from \"@tanstack/react-table\";\nimport { HeaderPinButtons } from \"../HeaderPinButtons.mjs\";\nimport React from \"react\";\nimport { RowPinButtons } from \"../RowPinButtons.mjs\";\ntype Person = {\n  id: string;\n  name: string;\n  age: number;\n  city: string;\n} & Record<`col${number}`, string>;\n\nconst smallData: Person[] = [\n  { id: \"1\", name: \"John\", age: 20, city: \"New York\" },\n  { id: \"2\", name: \"Jane\", age: 21, city: \"Los Angeles\" },\n  { id: \"3\", name: \"Jim\", age: 22, city: \"Chicago\" },\n];\n\nconst bigData: Person[] = Array.from({ length: 1000 }, (_, i) => ({\n  id: i.toString(),\n  name: `Person ${i}`,\n  age: 20 + i,\n  city: `City ${i}`,\n  ...Object.fromEntries(\n    Array.from({ length: 100 }, (_, j) => [`col${j}`, `Value ${i}-${j}`]),\n  ),\n}));\n\nexport const ReactTanstackTableUi = (\n  props: {\n    data: \"big\" | \"small\";\n    columns: \"many\" | \"few\";\n    meta?: Record<string, ColumnMeta<Person, string>>;\n  } & Omit<TableOptions<Person>, \"data\" | \"columns\"> &\n    Omit<React.ComponentProps<typeof TableComponent>, \"table\">,\n) => {\n  const theme = useTheme();\n  const data: Person[] = props.data === \"big\" ? bigData : smallData;\n\n  const columns: ColumnDef<Person>[] = React.useMemo(() => {\n    const columnHelper = decorateColumnHelper(createColumnHelper<Person>(), {\n      header: (original) => (\n        <Box sx={{ display: \"flex\", gap: 2 }}>\n          {original}\n          {props.enableColumnPinning && <HeaderPinButtons />}\n        </Box>\n      ),\n    });\n\n    const fewColumns = [\n      columnHelper.accessor(\"name\", {\n        header: \"Name\",\n        cell: (info) => (\n          <Box sx={{ display: \"flex\", gap: 2, flex: 1 }}>\n            <Typography variant=\"body2\">{info.getValue()}</Typography>\n            {props.enableRowPinning && <Box sx={{ flexGrow: 1 }} />}\n            {props.enableRowPinning && <RowPinButtons row={info.row} />}\n          </Box>\n        ),\n        meta: props.meta?.[\"name\"],\n      }),\n      columnHelper.accessor(\"age\", {\n        header: \"Age\",\n        meta: props.meta?.[\"age\"],\n        cell: (info) => <Typography variant=\"body2\">{info.getValue()}</Typography>,\n        size: 50,\n      }),\n      columnHelper.accessor(\"city\", {\n        header: \"City\",\n        meta: props.meta?.[\"city\"],\n        cell: (info) => <Typography variant=\"body2\">{info.getValue()}</Typography>,\n      }),\n    ];\n\n    const manyColumns = [\n      ...fewColumns,\n      ...Array.from({ length: 100 }, (_, i) =>\n        columnHelper.accessor(`col${i}`, {\n          header: `Column ${i}`,\n          cell: (info) => <Typography variant=\"body2\">{info.getValue()}</Typography>,\n        }),\n      ),\n    ];\n\n    return props.columns === \"few\" ? fewColumns : manyColumns;\n  }, [props.columns, props.enableColumnPinning, props.enableRowPinning, props.meta]);\n\n  const table = useReactTable({\n    ...props,\n    data,\n    columns,\n  });\n\n  return (\n    <ScopedCssBaseline>\n      <ThemeProvider theme={theme}>\n        <TableComponent {...props} table={table as Table<unknown>} />\n      </ThemeProvider>\n    </ScopedCssBaseline>\n  );\n};\n"
+  ],
+  "mappings": "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",
+  "debugId": "6CD65E7FABB356E264756E2164756E21",
+  "names": []
+}

package/{src/stories/createSourceCode.ts → dist/mjs/stories/createSourceCode.mjs}

@@ -1,4 +1,5 @@
-export const createSourceCode = (opts?: { hookOptions?: string, props?: string, nameMeta?: string }) => {
+// packages/skin-anocca/src/stories/createSourceCode.ts
+var createSourceCode = (opts) => {
   return `import { createColumnHelper, useReactTable, getCoreRowModel } from "@tanstack/react-table";
 import { Box } from "@mui/material";
 import { HeaderPinButtons } from "@rttui/skin-anocca";
@@ -28,7 +29,8 @@ const columnHelper = decorateColumnHelper(createColumnHelper<Person>(), {
 
 const columns = [
   columnHelper.accessor("name", {
-    header: "Name",${opts?.nameMeta ? '\n' + opts.nameMeta : ''}
+    header: "Name",${opts?.nameMeta ? `
+` + opts.nameMeta : ""}
   }),
   columnHelper.accessor("age", {
     header: "Age",
@@ -42,12 +44,19 @@ const columns = [
 const table = useReactTable({
   data,
   columns,
-  getCoreRowModel: getCoreRowModel()${opts?.hookOptions ? '\n' + opts.hookOptions : ''}
+  getCoreRowModel: getCoreRowModel()${opts?.hookOptions ? `
+` + opts.hookOptions : ""}
 });
 
 <ReactTanstackTableUi
   table={table}
-  enableColumnPinning${opts?.props ? '\n' + opts.props : ''}
+  enableColumnPinning${opts?.props ? `
+` + opts.props : ""}
 />
 `;
 };
+export {
+  createSourceCode
+};
+
+//# debugId=C53576C0D339686564756E2164756E21

package/dist/mjs/stories/createSourceCode.mjs.map

@@ -0,0 +1,10 @@
+{
+  "version": 3,
+  "sources": ["../../../src/stories/createSourceCode.ts"],
+  "sourcesContent": [
+    "export const createSourceCode = (opts?: { hookOptions?: string, props?: string, nameMeta?: string }) => {\n  return `import { createColumnHelper, useReactTable, getCoreRowModel } from \"@tanstack/react-table\";\nimport { Box } from \"@mui/material\";\nimport { HeaderPinButtons } from \"@rttui/skin-anocca\";\nimport { ReactTanstackTableUi, decorateColumnHelper } from \"@rttui/core\";\n\ntype Person = {\n  id: string;\n  name: string;\n  age: number;\n  city: string;\n};\n\nconst data: Person[] = [\n  { id: \"1\", name: \"John\", age: 20, city: \"New York\" },\n  { id: \"2\", name: \"Jane\", age: 21, city: \"Los Angeles\" },\n  { id: \"3\", name: \"Jim\", age: 22, city: \"Chicago\" },\n];\n\nconst columnHelper = decorateColumnHelper(createColumnHelper<Person>(), {\n  header: (original) => (\n    <Box sx={{ display: \"flex\", gap: 2 }}>\n      {original}\n      {props.enableColumnPinning && <HeaderPinButtons />}\n    </Box>\n  ),\n});\n\nconst columns = [\n  columnHelper.accessor(\"name\", {\n    header: \"Name\",${opts?.nameMeta ? '\\n' + opts.nameMeta : ''}\n  }),\n  columnHelper.accessor(\"age\", {\n    header: \"Age\",\n    size: 50,\n  }),\n  columnHelper.accessor(\"city\", {\n    header: \"City\",\n  }),\n];\n\nconst table = useReactTable({\n  data,\n  columns,\n  getCoreRowModel: getCoreRowModel()${opts?.hookOptions ? '\\n' + opts.hookOptions : ''}\n});\n\n<ReactTanstackTableUi\n  table={table}\n  enableColumnPinning${opts?.props ? '\\n' + opts.props : ''}\n/>\n`;\n};\n"
+  ],
+  "mappings": ";AAAO,IAAM,mBAAmB,CAAC,SAAuE;AAAA,EACtG,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBA6BY,MAAM,WAAW;AAAA,IAAO,KAAK,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sCAcvB,MAAM,cAAc;AAAA,IAAO,KAAK,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA,uBAK7D,MAAM,QAAQ;AAAA,IAAO,KAAK,QAAQ;AAAA;AAAA;AAAA;",
+  "debugId": "C53576C0D339686564756E2164756E21",
+  "names": []
+}

package/dist/types/HeaderPinButtons.d.ts

@@ -0,0 +1 @@
+export declare const HeaderPinButtons: () => import("react/jsx-runtime").JSX.Element | null;

package/dist/types/RowPinButtons.d.ts

@@ -0,0 +1,4 @@
+import { Row } from "@tanstack/react-table";
+export declare function RowPinButtons({ row }: {
+    row: Row<any>;
+}): import("react/jsx-runtime").JSX.Element | null;

package/dist/types/index.d.ts

@@ -0,0 +1,3 @@
+import { Skin } from "@rttui/core";
+declare const AnoccaSkin: Skin;
+export { AnoccaSkin };

package/dist/types/stories/ReactTanstackTableUiStory.stories.d.ts

@@ -0,0 +1,72 @@
+import type { StoryObj } from "@storybook/react";
+declare const meta: {
+    title: string;
+    component: (props: {
+        data: "big" | "small";
+        columns: "many" | "few";
+        meta?: Record<string, import("@tanstack/react-table").ColumnMeta<{
+            id: string;
+            name: string;
+            age: number;
+            city: string;
+        } & Record<`col${number}`, string>, string>>;
+    } & Omit<import("@tanstack/react-table").TableOptions<{
+        id: string;
+        name: string;
+        age: number;
+        city: string;
+    } & Record<`col${number}`, string>>, "data" | "columns"> & Omit<React.ComponentProps<typeof import("@rttui/core").ReactTanstackTableUi>, "table">) => import("react/jsx-runtime").JSX.Element;
+    parameters: {
+        layout: string;
+    };
+    argTypes: {
+        data: {
+            control: "select";
+        };
+        columns: {
+            control: "select";
+        };
+        pinColsRelativeTo: {
+            control: "select";
+            options: string[];
+        };
+        skin: {
+            control: "object";
+            table: {
+                disable: true;
+            };
+        };
+    };
+    args: {
+        width: number;
+        height: number;
+        skin: import("@rttui/core").Skin;
+        autoCrushColumns: false;
+        data: "big";
+        columns: "few";
+        getCoreRowModel: (table: import("@tanstack/react-table").Table<any>) => () => import("@tanstack/react-table").RowModel<any>;
+        pinColsRelativeTo: "cols";
+        fillAvailableSpaceAfterCrush: false;
+        scrollbarWidth: number;
+        getRowId: (row: {
+            id: string;
+            name: string;
+            age: number;
+            city: string;
+        } & Record<`col${number}`, string>) => string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Basic: Story;
+export declare const AutoCrushColumns: Story;
+export declare const AutoCrushColumnsExceptName: Story;
+export declare const PinRelativeToCols: Story;
+export declare const PinRelativeToTable: Story;
+export declare const FillAvailableSpaceAfterCrush: Story;
+export declare const FillAvailableSpaceAfterCrushExceptName: Story;
+export declare const FillAvailableSpaceAfterCrushWithoutSpecifiedScrollbarWidth: Story;
+export declare const CanPinRowsRelativeToRows: Story;
+export declare const CanPinRowsRelativeToTable: Story;
+export declare const SizeByLargestHeader: Story;
+export declare const SizeByLargestHeaderWithMeta: Story;

package/dist/types/stories/ReactTanstackTableUiStoryComponent.d.ts

@@ -0,0 +1,15 @@
+import { ReactTanstackTableUi as TableComponent } from "@rttui/core";
+import { ColumnMeta, TableOptions } from "@tanstack/react-table";
+import React from "react";
+type Person = {
+    id: string;
+    name: string;
+    age: number;
+    city: string;
+} & Record<`col${number}`, string>;
+export declare const ReactTanstackTableUi: (props: {
+    data: "big" | "small";
+    columns: "many" | "few";
+    meta?: Record<string, ColumnMeta<Person, string>>;
+} & Omit<TableOptions<Person>, "data" | "columns"> & Omit<React.ComponentProps<typeof TableComponent>, "table">) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/stories/createSourceCode.d.ts

@@ -0,0 +1,5 @@
+export declare const createSourceCode: (opts?: {
+    hookOptions?: string;
+    props?: string;
+    nameMeta?: string;
+}) => string;

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@rttui/skin-anocca",
-  "version": "1.0.15",
+  "version": "1.0.17",
   "main": "./dist/cjs/index.cjs",
   "dependencies": {
-    "@rttui/core": "^1.0.15"
+    "@rttui/core": "^1.0.16"
   },
   "module": "./dist/mjs/index.mjs",
   "types": "./dist/types/index.d.ts",
@@ -17,6 +17,9 @@
   "publishConfig": {
     "access": "public"
   },
+  "files": [
+    "dist"
+  ],
   "scripts": {
     "dev": "vite",
     "build": "tsc -b && vite build",

package/.storybook/main.ts

@@ -1,18 +0,0 @@
-import type { StorybookConfig } from '@storybook/react-vite';
-
-const config: StorybookConfig = {
-  "stories": [
-    "../src/**/*.mdx",
-    "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"
-  ],
-  "addons": [
-    "@storybook/addon-essentials",
-    "@storybook/addon-onboarding",
-    "@storybook/addon-interactions"
-  ],
-  "framework": {
-    "name": "@storybook/react-vite",
-    "options": {}
-  }
-};
-export default config;

package/.storybook/preview.ts

@@ -1,14 +0,0 @@
-import type { Preview } from '@storybook/react'
-
-const preview: Preview = {
-  parameters: {
-    controls: {
-      matchers: {
-       color: /(background|color)$/i,
-       date: /Date$/i,
-      },
-    },
-  },
-};
-
-export default preview;

package/CHANGELOG.md

@@ -1,120 +0,0 @@
-# @rttui/skin-anocca
-
-## 1.0.15
-
-### Patch Changes
-
-- Improve column sizing API
-- Updated dependencies
-  - @rttui/core@1.0.15
-
-## 1.0.14
-
-### Patch Changes
-
-- Add a storybook
-- Updated dependencies
-  - @rttui/core@1.0.14
-
-## 1.0.13
-
-### Patch Changes
-
-- Updated dependencies
-  - @rttui/core@1.0.13
-
-## 1.0.12
-
-### Patch Changes
-
-- Updated dependencies
-  - @rttui/core@1.0.12
-
-## 1.0.11
-
-### Patch Changes
-
-- Better styling and auto measure columns
-- Updated dependencies
-  - @rttui/core@1.0.11
-
-## 1.0.10
-
-### Patch Changes
-
-- Updated dependencies
-  - @rttui/core@1.0.10
-
-## 1.0.9
-
-### Patch Changes
-
-- Updated dependencies
-  - @rttui/core@1.0.9
-
-## 1.0.8
-
-### Patch Changes
-
-- Updated dependencies
-  - @rttui/core@1.0.8
-
-## 1.0.7
-
-### Patch Changes
-
-- Updated dependencies
-  - @rttui/core@1.0.7
-
-## 1.0.6
-
-### Patch Changes
-
-- Updated dependencies
-  - @rttui/core@1.0.6
-
-## 1.0.5
-
-### Patch Changes
-
-- Fix build
-- Updated dependencies
-  - @rttui/core@1.0.5
-
-## 1.0.4
-
-### Patch Changes
-
-- new build method
-- Updated dependencies
-  - @rttui/core@1.0.4
-
-## 1.0.3
-
-### Patch Changes
-
-- 51c73d3: build with bun build instead
-- Updated dependencies [51c73d3]
-  - @rttui/core@1.0.3
-
-## 1.0.2
-
-### Patch Changes
-
-- fix lib build
-- Updated dependencies
-  - @rttui/core@1.0.2
-
-## 1.0.1
-
-### Patch Changes
-
-- Fix dependencies
-- Updated dependencies
-  - @rttui/core@1.0.1
-
-## 1.0.0
-
-### Major Changes
-
-- First release

package/index.html

@@ -1,13 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
-  </body>
-</html>

package/src/HeaderPinButtons.tsx

@@ -1,81 +0,0 @@
-import { useVirtualHeader } from "@rttui/core";
-import { MdChevronLeft, MdChevronRight, MdClose } from "react-icons/md";
-
-export const HeaderPinButtons = () => {
-  const vHeader = useVirtualHeader();
-  const header = vHeader.header;
-  if (!header) {
-    return null;
-  }
-  const isPinned = vHeader.isPinned;
-  return (
-    <div style={{ display: "flex", gap: "-4px", justifyContent: "flex-start" }}>
-      {isPinned !== "start" ? (
-        <button
-          style={{
-            border: "none",
-            background: "transparent",
-            cursor: "pointer",
-            padding: "2px",
-            borderRadius: "4px",
-            display: "flex",
-            alignItems: "center",
-            opacity: 0.5,
-          }}
-          onClick={() => {
-            if (!header) {
-              return;
-            }
-            header.column.pin("left");
-          }}
-        >
-          <MdChevronLeft />
-        </button>
-      ) : null}
-      {isPinned ? (
-        <button
-          style={{
-            border: "none",
-            background: "transparent",
-            cursor: "pointer",
-            padding: "2px",
-            borderRadius: "4px",
-            display: "flex",
-            alignItems: "center",
-            opacity: 0.7,
-          }}
-          onClick={() => {
-            if (!header) {
-              return;
-            }
-            header.column.pin(false);
-          }}
-        >
-          <MdClose />
-        </button>
-      ) : null}
-      {isPinned !== "end" ? (
-        <button
-          style={{
-            border: "none",
-            background: "transparent",
-            cursor: "pointer",
-            padding: "2px",
-            borderRadius: "4px",
-            display: "flex",
-            alignItems: "center",
-            opacity: 0.5,
-          }}
-          onClick={() => {
-            if (!header) {
-              return;
-            }
-            header.column.pin("right");
-          }}
-        >
-          <MdChevronRight />
-        </button>
-      ) : null}
-    </div>
-  );
-};

package/src/RowPinButtons.tsx

@@ -1,40 +0,0 @@
-import { Row } from "@tanstack/react-table";
-import { IconButton, Stack } from "@mui/material";
-import { FiX, FiChevronUp, FiChevronDown } from "react-icons/fi";
-
-export function RowPinButtons({ row }: { row: Row<any> }) {
-  if (!row.getCanPin()) {
-    return null;
-  }
-
-  if (row.getIsPinned()) {
-    return (
-      <IconButton
-        onClick={() => row.pin(false, true, true)}
-        size="small"
-        sx={{ color: "text.secondary" }}
-      >
-        <FiX size={16} />
-      </IconButton>
-    );
-  }
-
-  return (
-    <Stack direction="row">
-      <IconButton
-        onClick={() => row.pin("top", true, true)}
-        size="small"
-        sx={{ color: "text.secondary" }}
-      >
-        <FiChevronUp size={16} />
-      </IconButton>
-      <IconButton
-        onClick={() => row.pin("bottom", true, true)}
-        size="small"
-        sx={{ color: "text.secondary" }}
-      >
-        <FiChevronDown size={16} />
-      </IconButton>
-    </Stack>
-  );
-}