@rttui/skin-anocca 1.0.13 → 1.0.15

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

@@ -0,0 +1,206 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { getCoreRowModel } from "@tanstack/react-table";
+import { AnoccaSkin } from "..";
+import { ReactTanstackTableUi } from "./ReactTanstackTableUiStoryComponent";
+import { createSourceCode } from "./createSourceCode";
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+const meta = {
+  title: "ReactTanstackTableUi",
+  component: ReactTanstackTableUi,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+    layout: "centered",
+  },
+  // More on argTypes: https://storybook.js.org/docs/api/argtypes
+  argTypes: {
+    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: {
+    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>;
+
+export const Basic: Story = {
+  args: {
+    enableColumnPinning: true,
+    autoCrushColumns: false,
+    fillAvailableSpaceAfterCrush: false,
+    pinColsRelativeTo: "cols",
+  },
+  parameters: {
+    docs: {
+      source: { language: "tsx", code: createSourceCode() },
+    },
+  },
+};
+
+export const AutoCrushColumns: Story = {
+  args: {
+    autoCrushColumns: true,
+  },
+  parameters: {
+    docs: {
+      source: {
+        language: "tsx",
+        code: createSourceCode({ props: "  autoCrushColumns" }),
+      },
+    },
+  },
+};
+
+export const AutoCrushColumnsExceptName: Story = {
+  args: {
+    autoCrushColumns: true,
+    meta: {
+      name: {
+        autoCrush: false,
+      },
+    },
+  },
+  parameters: {
+    docs: {
+      source: {
+        language: "tsx",
+        code: createSourceCode({
+          props: "  autoCrushColumns",
+          nameMeta: "    autoCrush: false,",
+        }),
+      },
+    },
+  },
+};
+
+export const PinRelativeToCols: Story = {
+  args: {
+    autoCrushColumns: true,
+    pinColsRelativeTo: "cols",
+    initialState: {
+      columnPinning: {
+        right: ["city"],
+      },
+    },
+  },
+};
+
+export const PinRelativeToTable: Story = {
+  args: {
+    autoCrushColumns: true,
+    pinColsRelativeTo: "table",
+    initialState: {
+      columnPinning: {
+        right: ["city"],
+      },
+    },
+  },
+};
+
+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 CanPinRowsRelativeToTable: Story = {
+  args: {
+    enableRowPinning: true,
+    enableColumnPinning: true,
+    data: "small",
+    pinRowsRelativeTo: "table",
+    initialState: {
+      rowPinning: {
+        bottom: ["3"],
+      },
+    },
+  },
+};
+
+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

@@ -0,0 +1,113 @@
+import { Box, ScopedCssBaseline, ThemeProvider, Typography } from "@mui/material";
+import { useTheme } from "@mui/material/styles";
+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}>
+        <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

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