@rttui/skin-anocca 1.0.14 → 1.0.15

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @rttui/skin-anocca
 
+## 1.0.15
+
+### Patch Changes
+
+- Improve column sizing API
+- Updated dependencies
+  - @rttui/core@1.0.15
+
 ## 1.0.14
 
 ### Patch Changes

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@rttui/skin-anocca",
-  "version": "1.0.14",
+  "version": "1.0.15",
   "main": "./dist/cjs/index.cjs",
   "dependencies": {
-    "@rttui/core": "^1.0.14"
+    "@rttui/core": "^1.0.15"
   },
   "module": "./dist/mjs/index.mjs",
   "types": "./dist/types/index.d.ts",

package/src/RowPinButtons.tsx

@@ -0,0 +1,40 @@
+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>
+  );
+}

package/src/index.tsx

@@ -116,9 +116,9 @@ const AnoccaSkin: Skin = {
     );
   },
   HeaderRow: TableHeaderRow,
-  HeaderCell: (props) => {
-    return <TableHeaderCell {...props} />;
-  },
+  HeaderCell: React.forwardRef((props, ref) => {
+    return <TableHeaderCell {...props} ref={ref} />;
+  }),
   TableBody: ({ children }) => {
     return (
       <TableBody
@@ -127,6 +127,7 @@ const AnoccaSkin: Skin = {
         sx={{
           position: "relative",
           width: "var(--table-width)",
+          height: "var(--table-height)",
           display: "flex",
           flexDirection: "column",
           justifyContent: "flex-start",
@@ -300,6 +301,8 @@ const AnoccaSkin: Skin = {
             whiteSpace: "nowrap",
             zIndex: isPinned ? 5 : 0,
             boxSizing: "border-box",
+            fontSize: "0.875rem",
+            color: "text.primary",
             alignItems: "center",
             gap: "8px",
             display: "flex",
@@ -367,70 +370,81 @@ const AnoccaSkin: Skin = {
   },
 };
 
-function TableHeaderCell({
-  headerId,
-  isPinned,
-  width,
-  header,
-  type,
-  isLast,
-  isLastPinned,
-  isLastCenter,
-}: VirtualHeader & {
-  type: "header" | "footer";
-  isLast: boolean;
-  isFirst: boolean;
-  isLastPinned: boolean;
-  isFirstPinned: boolean;
-  isFirstCenter: boolean;
-  isLastCenter: boolean;
-}) {
-  const { table } = useTableContext();
-  return (
-    <TableCell
-      component="div"
-      className="th"
-      data-header-id={headerId}
-      data-is-pinned={isPinned}
-      sx={{
-        transition: "background-color 0.2s ease",
-        whiteSpace: "nowrap",
-        zIndex: isPinned ? 1 : 0,
-        display: "flex",
-        overflow: "hidden",
-        height: "var(--header-row-height)",
-        width,
-        position: "relative",
-        flexShrink: 0,
-        alignItems: "center",
-        gap: "8px",
-        justifyContent: "space-between",
-        padding: "6px 12px",
-        boxSizing: "border-box",
-        fontWeight: 600,
-        backgroundColor: isPinned
-          ? (theme) => theme.palette.background.paper
-          : "transparent",
-        borderRight:
-          ((isPinned === "start" && !isLastPinned) || !isPinned) &&
-          !isLast &&
-          !(isLastCenter && table.getIsSomeColumnsPinned("right"))
-            ? (theme) => `1px solid ${theme.palette.divider}`
-            : undefined,
-        borderLeft:
-          isPinned === "end" && !isLastPinned
-            ? (theme) => `1px solid ${theme.palette.divider}`
-            : undefined,
-      }}
-    >
-      <div style={{ flex: 1, display: "flex", justifyContent: "flex-start" }}>
-        {header && !header.isPlaceholder
-          ? flexRender(header.column.columnDef[type], header.getContext())
-          : null}
-      </div>
-    </TableCell>
-  );
-}
+const TableHeaderCell = React.forwardRef<
+  HTMLDivElement,
+  VirtualHeader & {
+    type: "header" | "footer";
+    isLast: boolean;
+    isFirst: boolean;
+    isLastPinned: boolean;
+    isFirstPinned: boolean;
+    isLastCenter: boolean;
+    isFirstCenter: boolean;
+    isMeasuring: boolean;
+  }
+>(
+  (
+    {
+      headerId,
+      isPinned,
+      width,
+      header,
+      type,
+      isLast,
+      isLastPinned,
+      isLastCenter,
+      isMeasuring,
+    },
+    ref,
+  ) => {
+    const { table } = useTableContext();
+    return (
+      <TableCell
+        ref={ref}
+        component="div"
+        className="th"
+        data-header-id={headerId}
+        data-is-pinned={isPinned}
+        sx={{
+          transition: "background-color 0.2s ease",
+          whiteSpace: "nowrap",
+          zIndex: isPinned ? 1 : 0,
+          display: "flex",
+          overflow: "hidden",
+          height: "var(--header-row-height)",
+          width: isMeasuring ? "auto" : width,
+          position: "relative",
+          flexShrink: 0,
+          alignItems: "center",
+          gap: "8px",
+          justifyContent: "space-between",
+          padding: "6px 12px",
+          boxSizing: "border-box",
+          fontWeight: 600,
+          backgroundColor: isPinned
+            ? (theme) => theme.palette.background.paper
+            : "transparent",
+          borderRight:
+            ((isPinned === "start" && !isLastPinned) || !isPinned) &&
+            !isLast &&
+            !(isLastCenter && table.getIsSomeColumnsPinned("right"))
+              ? (theme) => `1px solid ${theme.palette.divider}`
+              : undefined,
+          borderLeft:
+            isPinned === "end" && !isLastPinned
+              ? (theme) => `1px solid ${theme.palette.divider}`
+              : undefined,
+        }}
+      >
+        <div style={{ flex: 1, display: "flex", justifyContent: "flex-start" }}>
+          {header && !header.isPlaceholder
+            ? flexRender(header.column.columnDef[type], header.getContext())
+            : null}
+        </div>
+      </TableCell>
+    );
+  },
+);
 
 export { AnoccaSkin };
 

package/src/stories/ReactTanstackTableUiStory.mdx

@@ -0,0 +1,136 @@
+import { Canvas, Meta, Story, Source, Controls } from '@storybook/blocks';
+ 
+import * as RttuiStories from './ReactTanstackTableUiStory.stories';
+ 
+<Meta of={RttuiStories} />
+
+# Column sizing
+By default columns uses the size defined in the columns. By default that is 150px in tanstack table.
+
+You can override this by setting the `size` prop on the column.
+```tsx
+columnHelper.accessor("age", {
+  header: "Age",
+  size: 50,
+})
+```
+
+<Canvas of={RttuiStories.Basic} />
+
+### Auto crush columns
+
+You can also use the `autoCrushColumns` prop to automatically crush columns to fit the available space.
+
+```tsx
+<ReactTanstackTableUi
+  autoCrushColumns
+/>
+```
+
+To prevent a perticular column from being crushed, you can set the `autoCrush` meta option to `false`.
+
+```tsx
+columnHelper.accessor("name", {
+  header: "Name",
+  meta: { autoCrush: false },
+})
+```
+
+<Canvas of={RttuiStories.AutoCrushColumnsExceptName} />
+
+### Fill available space after crush
+
+If you don't have so many columns and you want the columns to fill all the available space,
+you can set the `autoCrushColumns` prop to `true` and set the `fillAvailableSpaceAfterCrush` prop to `true`.
+[If you don't want a horizontal scrollbar to appear](?path=/docs/reacttanstacktableui--scrollbarwidthspecified) you also need to specify the `scrollbarWidth` prop which is the width of the vertical scrollbar.
+
+
+```tsx
+<ReactTanstackTableUi
+  autoCrushColumns
+  fillAvailableSpaceAfterCrush
+  scrollbarWidth={16}
+/>
+```
+
+To prevent a perticular column from being expanded, you can set the `fillAvailableSpaceAfterCrush` meta option to `false`.
+
+```ts
+columnHelper.accessor("name", {
+  header: "Name",
+  meta: { fillAvailableSpaceAfterCrush: false },
+})
+```
+
+<Canvas of={RttuiStories.FillAvailableSpaceAfterCrushExceptName} />
+
+### Size by largest header
+
+If you want the columns to be sized by the largest header, you can set the `crushMinSizeBy` prop to `header`.
+
+```tsx
+<ReactTanstackTableUi crushMinSizeBy="header" />
+```
+
+<Story of={RttuiStories.SizeByLargestHeader} />
+
+You can also use meta to configure the crush behavior for a perticular column.
+
+```ts
+columnHelper.accessor("age", {
+  header: "Age",
+  meta: { crushMinSizeBy: "cell" },
+})
+```
+
+<Story of={RttuiStories.SizeByLargestHeaderWithMeta} />
+
+<br /><br />
+
+# Column Pinning
+ 
+By default columns are pinned relative to the other columns:
+ 
+<Story of={RttuiStories.PinRelativeToCols} />
+
+```tsx
+<ReactTanstackTableUi
+  autoCrushColumns
+  pinColsRelativeTo="cols"
+/>
+```
+
+You can also pin columns relative to the table:
+
+<Story of={RttuiStories.PinRelativeToTable} />
+
+```tsx
+<ReactTanstackTableUi
+  autoCrushColumns
+  pinColsRelativeTo="table"
+/>
+```
+
+# Row Pinning
+
+By default rows are pinned relative to the other rows:
+
+<Story of={RttuiStories.CanPinRowsRelativeToRows} />
+
+```tsx
+<ReactTanstackTableUi
+  enableRowPinning
+  pinRowsRelativeTo="rows"
+/>
+```
+
+You can also pin rows relative to the table:
+
+<Story of={RttuiStories.CanPinRowsRelativeToTable} />
+
+```tsx
+<ReactTanstackTableUi
+  enableRowPinning
+  pinRowsRelativeTo="table"
+/>
+```

package/src/stories/ReactTanstackTableUiStory.stories.tsx

@@ -1,31 +1,9 @@
 import type { Meta, StoryObj } from "@storybook/react";
 
-import { Box } from "@mui/material";
-import { decorateColumnHelper } from "@rttui/core";
-import { createColumnHelper, getCoreRowModel } from "@tanstack/react-table";
+import { getCoreRowModel } from "@tanstack/react-table";
 import { AnoccaSkin } from "..";
-import { HeaderPinButtons } from "../HeaderPinButtons";
 import { ReactTanstackTableUi } from "./ReactTanstackTableUiStoryComponent";
-
-type Person = {
-  id: string;
-  name: string;
-  age: number;
-  city: string;
-};
-
-const data: Person[] = [
-  { 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" },
-];
-
-const bigData: Person[] = Array.from({ length: 1000 }, (_, i) => ({
-  id: i.toString(),
-  name: `Person ${i}`,
-  age: 20 + i,
-  city: `City ${i}`,
-}));
+import { createSourceCode } from "./createSourceCode";
 
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
 const meta = {
@@ -37,153 +15,192 @@ const meta = {
   },
   // More on argTypes: https://storybook.js.org/docs/api/argtypes
   argTypes: {
-    tableOptions: { control: "object" },
-    uiOptions: { control: "object" },
+    data: { control: "select" },
+    columns: { control: "select" },
+    pinColsRelativeTo: { control: "select", options: ["cols", "table"] },
+    skin: {
+      control: "object",
+      table: { disable: true },
+    },
   },
   // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
   args: {
-    uiOptions: {
-      width: 600,
-      height: 400,
-      skin: AnoccaSkin,
-      autoSizeColumns: true,
-    },
-    tableOptions: {
-      columns: [],
-      data: [],
-      getCoreRowModel: getCoreRowModel(),
-    },
+    width: 600,
+    height: 400,
+    skin: AnoccaSkin,
+    autoCrushColumns: false,
+    data: "big",
+    columns: "few",
+    getCoreRowModel: getCoreRowModel(),
+    pinColsRelativeTo: "cols",
+    fillAvailableSpaceAfterCrush: false,
+    enableColumnPinning: true,
+    scrollbarWidth: 16,
+    getRowId: (row) => row.id,
   },
 } satisfies Meta<typeof ReactTanstackTableUi>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-const columnHelper = decorateColumnHelper(createColumnHelper<Person>(), {
-  header: (original) => (
-    <Box sx={{ display: "flex", gap: 2 }}>
-      {original}
-      <HeaderPinButtons />
-    </Box>
-  ),
-});
-
-const columns = [
-  columnHelper.accessor("name", {
-    header: "Name",
-  }),
-  columnHelper.accessor("age", {
-    header: "Age",
-  }),
-  columnHelper.accessor("city", {
-    header: "City",
-  }),
-];
-
-// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
-export const AutoSizeColumns: Story = {
+export const Basic: Story = {
   args: {
-    tableOptions: {
-      columns,
-      data,
-      getCoreRowModel: getCoreRowModel(),
-      enableColumnResizing: true,
-      enableColumnPinning: true,
+    enableColumnPinning: true,
+    autoCrushColumns: false,
+    fillAvailableSpaceAfterCrush: false,
+    pinColsRelativeTo: "cols",
+  },
+  parameters: {
+    docs: {
+      source: { language: "tsx", code: createSourceCode() },
     },
-    uiOptions: {
-      width: 600,
-      height: 400,
-      skin: AnoccaSkin,
-      autoSizeColumns: true,
+  },
+};
+
+export const AutoCrushColumns: Story = {
+  args: {
+    autoCrushColumns: true,
+  },
+  parameters: {
+    docs: {
+      source: {
+        language: "tsx",
+        code: createSourceCode({ props: "  autoCrushColumns" }),
+      },
     },
   },
 };
 
-// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
-export const AutoSizeColumnsPinRelativeToCols: Story = {
+export const AutoCrushColumnsExceptName: Story = {
   args: {
-    tableOptions: {
-      columns,
-      data,
-      getCoreRowModel: getCoreRowModel(),
-      enableColumnResizing: true,
-      enableColumnPinning: true,
+    autoCrushColumns: true,
+    meta: {
+      name: {
+        autoCrush: false,
+      },
     },
-    uiOptions: {
-      width: 600,
-      height: 400,
-      skin: AnoccaSkin,
-      autoSizeColumns: true,
-      pinColsRelativeTo: "cols",
+  },
+  parameters: {
+    docs: {
+      source: {
+        language: "tsx",
+        code: createSourceCode({
+          props: "  autoCrushColumns",
+          nameMeta: "    autoCrush: false,",
+        }),
+      },
     },
   },
 };
 
-// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
 export const PinRelativeToCols: Story = {
   args: {
-    tableOptions: {
-      columns,
-      data,
-      getCoreRowModel: getCoreRowModel(),
-      enableColumnResizing: true,
-      enableColumnPinning: true,
-      initialState: {
-        columnPinning: {
-          right: ["city"],
-        },
+    autoCrushColumns: true,
+    pinColsRelativeTo: "cols",
+    initialState: {
+      columnPinning: {
+        right: ["city"],
       },
     },
-    uiOptions: {
-      width: 600,
-      height: 400,
-      skin: AnoccaSkin,
-    },
   },
 };
 
 export const PinRelativeToTable: Story = {
   args: {
-    tableOptions: {
-      columns,
-      data,
-      getCoreRowModel: getCoreRowModel(),
-      enableColumnResizing: true,
-      enableColumnPinning: true,
-      initialState: {
-        columnPinning: {
-          right: ["city"],
-        },
+    autoCrushColumns: true,
+    pinColsRelativeTo: "table",
+    initialState: {
+      columnPinning: {
+        right: ["city"],
       },
     },
-    uiOptions: {
-      width: 600,
-      height: 400,
-      skin: AnoccaSkin,
-      pinColsRelativeTo: "table",
+  },
+};
+
+export const FillAvailableSpaceAfterCrush: Story = {
+  args: {
+    autoCrushColumns: true,
+    fillAvailableSpaceAfterCrush: true,
+  },
+};
+
+export const FillAvailableSpaceAfterCrushExceptName: Story = {
+  args: {
+    autoCrushColumns: true,
+    fillAvailableSpaceAfterCrush: true,
+    meta: {
+      name: {
+        fillAvailableSpaceAfterCrush: false,
+      },
+    },
+  },
+  parameters: {
+    docs: {
+      source: {
+        language: "tsx",
+        code: createSourceCode({
+          props: "  autoCrushColumns\n  fillAvailableSpaceAfterCrush",
+          nameMeta: "    fillAvailableSpaceAfterCrush: false,",
+        }),
+      },
+    },
+  },
+};
+
+export const FillAvailableSpaceAfterCrushWithoutSpecifiedScrollbarWidth: Story =
+  {
+    args: {
+      autoCrushColumns: true,
+      fillAvailableSpaceAfterCrush: true,
+      scrollbarWidth: 0,
+    },
+  };
+
+export const CanPinRowsRelativeToRows: Story = {
+  args: {
+    enableRowPinning: true,
+    enableColumnPinning: true,
+    data: "small",
+    pinRowsRelativeTo: "rows",
+    initialState: {
+      rowPinning: {
+        bottom: ["3"],
+      },
     },
   },
 };
 
-export const PinRelativeToTableWithBigData: Story = {
+export const CanPinRowsRelativeToTable: Story = {
   args: {
-    tableOptions: {
-      columns,
-      data: bigData,
-      getCoreRowModel: getCoreRowModel(),
-      enableColumnResizing: true,
-      enableColumnPinning: true,
-      initialState: {
-        columnPinning: {
-          right: ["city"],
-        },
+    enableRowPinning: true,
+    enableColumnPinning: true,
+    data: "small",
+    pinRowsRelativeTo: "table",
+    initialState: {
+      rowPinning: {
+        bottom: ["3"],
       },
     },
-    uiOptions: {
-      width: 600,
-      height: 400,
-      skin: AnoccaSkin,
-      pinColsRelativeTo: "table",
+  },
+};
+
+export const SizeByLargestHeader: Story = {
+  args: {
+    autoCrushColumns: true,
+    crushMinSizeBy: "header",
+    enableColumnPinning: true,
+  },
+};
+
+export const SizeByLargestHeaderWithMeta: Story = {
+  args: {
+    autoCrushColumns: true,
+    crushMinSizeBy: "header",
+    enableColumnPinning: true,
+    meta: {
+      age: {
+        crushMinSizeBy: 'cell',
+      },
     },
   },
 };

package/src/stories/ReactTanstackTableUiStoryComponent.tsx

@@ -1,22 +1,112 @@
-import { ScopedCssBaseline, ThemeProvider } from "@mui/material";
+import { Box, ScopedCssBaseline, ThemeProvider, Typography } from "@mui/material";
 import { useTheme } from "@mui/material/styles";
-import { ReactTanstackTableUi as Table } from "@rttui/core";
-import { TableOptions, useReactTable } from "@tanstack/react-table";
-
-export const ReactTanstackTableUi = ({
-  tableOptions,
-  uiOptions,
-}: {
-  tableOptions: TableOptions<any>;
-  uiOptions: Omit<React.ComponentProps<typeof Table>, "table">;
-}) => {
-  const table = useReactTable(tableOptions);
+import {
+  decorateColumnHelper,
+  ReactTanstackTableUi as TableComponent,
+} from "@rttui/core";
+import {
+  ColumnDef,
+  ColumnMeta,
+  createColumnHelper,
+  Table,
+  TableOptions,
+  useReactTable,
+} from "@tanstack/react-table";
+import { HeaderPinButtons } from "../HeaderPinButtons";
+import React from "react";
+import { RowPinButtons } from "../RowPinButtons";
+type Person = {
+  id: string;
+  name: string;
+  age: number;
+  city: string;
+} & Record<`col${number}`, string>;
+
+const smallData: Person[] = [
+  { 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" },
+];
+
+const bigData: Person[] = Array.from({ length: 1000 }, (_, i) => ({
+  id: i.toString(),
+  name: `Person ${i}`,
+  age: 20 + i,
+  city: `City ${i}`,
+  ...Object.fromEntries(
+    Array.from({ length: 100 }, (_, j) => [`col${j}`, `Value ${i}-${j}`]),
+  ),
+}));
+
+export 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">,
+) => {
   const theme = useTheme();
+  const data: Person[] = props.data === "big" ? bigData : smallData;
+
+  const columns: ColumnDef<Person>[] = React.useMemo(() => {
+    const columnHelper = decorateColumnHelper(createColumnHelper<Person>(), {
+      header: (original) => (
+        <Box sx={{ display: "flex", gap: 2 }}>
+          {original}
+          {props.enableColumnPinning && <HeaderPinButtons />}
+        </Box>
+      ),
+    });
+
+    const fewColumns = [
+      columnHelper.accessor("name", {
+        header: "Name",
+        cell: (info) => (
+          <Box sx={{ display: "flex", gap: 2, flex: 1 }}>
+            <Typography variant="body2">{info.getValue()}</Typography>
+            <Box sx={{ flexGrow: 1 }} />
+            {props.enableRowPinning && <RowPinButtons row={info.row} />}
+          </Box>
+        ),
+        meta: props.meta?.["name"],
+      }),
+      columnHelper.accessor("age", {
+        header: "Age",
+        meta: props.meta?.["age"],
+        cell: (info) => <Typography variant="body2">{info.getValue()}</Typography>,
+        size: 50,
+      }),
+      columnHelper.accessor("city", {
+        header: "City",
+        meta: props.meta?.["city"],
+        cell: (info) => <Typography variant="body2">{info.getValue()}</Typography>,
+      }),
+    ];
+
+    const manyColumns = [
+      ...fewColumns,
+      ...Array.from({ length: 100 }, (_, i) =>
+        columnHelper.accessor(`col${i}`, {
+          header: `Column ${i}`,
+          cell: (info) => <Typography variant="body2">{info.getValue()}</Typography>,
+        }),
+      ),
+    ];
+
+    return props.columns === "few" ? fewColumns : manyColumns;
+  }, [props.columns, props.enableColumnPinning, props.enableRowPinning, props.meta]);
+
+  const table = useReactTable({
+    ...props,
+    data,
+    columns,
+  });
 
   return (
     <ScopedCssBaseline>
       <ThemeProvider theme={theme}>
-        <Table table={table} {...uiOptions} />
+        <TableComponent {...props} table={table as Table<unknown>} />
       </ThemeProvider>
     </ScopedCssBaseline>
   );

package/src/stories/ScrollbarWidthSpecified.mdx

@@ -0,0 +1,42 @@
+import { Canvas, Meta, Story, Source, Controls } from '@storybook/blocks';
+import { Box } from '@mui/material';
+ 
+import * as ColumnPinningStories from './ReactTanstackTableUiStory.stories';
+ 
+<Meta of={ColumnPinningStories} />
+
+# ⚠️ No scrollbar width specified
+We get a horizontal scrollbar because we don't specify the width of the vertical scrollbar.
+```tsx
+<ReactTanstackTableUi
+  autoCrushColumns
+  fillAvailableSpaceAfterCrush
+/>
+```
+<Box sx={{
+  '*::-webkit-scrollbar': { width: '16px' },
+  '*::-webkit-scrollbar-track': { backgroundColor: 'yellow' },
+  '*::-webkit-scrollbar-thumb': { backgroundColor: 'blue' },
+}}
+>
+  <Story of={ColumnPinningStories.FillAvailableSpaceAfterCrushWithoutSpecifiedScrollbarWidth} />
+</Box>
+<br /><br />
+# ✅ Scrollbar width specified
+We specify the width of the vertical scrollbar and we correctly only see a vertical scrollbar.
+```tsx
+<ReactTanstackTableUi
+  autoCrushColumns
+  fillAvailableSpaceAfterCrush
+  scrollbarWidth={16}
+/>
+```
+<Box sx={{
+  '*::-webkit-scrollbar': { width: '16px' },
+  '*::-webkit-scrollbar-track': { backgroundColor: 'yellow' },
+  '*::-webkit-scrollbar-thumb': { backgroundColor: 'blue' },
+}}
+>
+  <Story of={ColumnPinningStories.FillAvailableSpaceAfterCrushExceptName} />
+</Box>
+

package/src/stories/createSourceCode.ts

@@ -0,0 +1,53 @@
+export const createSourceCode = (opts?: { hookOptions?: string, props?: string, nameMeta?: string }) => {
+  return `import { createColumnHelper, useReactTable, getCoreRowModel } from "@tanstack/react-table";
+import { Box } from "@mui/material";
+import { HeaderPinButtons } from "@rttui/skin-anocca";
+import { ReactTanstackTableUi, decorateColumnHelper } from "@rttui/core";
+
+type Person = {
+  id: string;
+  name: string;
+  age: number;
+  city: string;
+};
+
+const data: Person[] = [
+  { 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" },
+];
+
+const columnHelper = decorateColumnHelper(createColumnHelper<Person>(), {
+  header: (original) => (
+    <Box sx={{ display: "flex", gap: 2 }}>
+      {original}
+      {props.enableColumnPinning && <HeaderPinButtons />}
+    </Box>
+  ),
+});
+
+const columns = [
+  columnHelper.accessor("name", {
+    header: "Name",${opts?.nameMeta ? '\n' + opts.nameMeta : ''}
+  }),
+  columnHelper.accessor("age", {
+    header: "Age",
+    size: 50,
+  }),
+  columnHelper.accessor("city", {
+    header: "City",
+  }),
+];
+
+const table = useReactTable({
+  data,
+  columns,
+  getCoreRowModel: getCoreRowModel()${opts?.hookOptions ? '\n' + opts.hookOptions : ''}
+});
+
+<ReactTanstackTableUi
+  table={table}
+  enableColumnPinning${opts?.props ? '\n' + opts.props : ''}
+/>
+`;
+};

package/vite.config.ts

@@ -1,7 +1,23 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import path from "path";
+import fs from "fs";
+let base: undefined | string;
+
+try {
+  const packageJson = fs.readFileSync(
+    path.join(__dirname, "package.json"),
+    "utf-8",
+  );
+  const viteBase = JSON.parse(packageJson).viteBase;
+  if (viteBase) {
+    base = viteBase;
+  }
+} catch (e) {
+  // ignore
+}
 
 // https://vite.dev/config/
 export default defineConfig({
   plugins: [react()],
-})
+});