@rttui/skin-anocca 1.0.15 → 1.0.16

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @rttui/skin-anocca
 
+## 1.0.16
+
+### Patch Changes
+
+- fix invalid build
+
 ## 1.0.15
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rttui/skin-anocca",
-  "version": "1.0.15",
+  "version": "1.0.16",
   "main": "./dist/cjs/index.cjs",
   "dependencies": {
     "@rttui/core": "^1.0.15"

package/src/stories/ReactTanstackTableUiStory.mdx

@@ -19,7 +19,7 @@ columnHelper.accessor("age", {
 
 ### Auto crush columns
 
-You can also use the `autoCrushColumns` prop to automatically crush columns to fit the available space.
+You can also use the `autoCrushColumns` prop to automatically crush columns to fit the largest header in the column.
 
 ```tsx
 <ReactTanstackTableUi
@@ -27,7 +27,7 @@ You can also use the `autoCrushColumns` prop to automatically crush columns to f
 />
 ```
 
-To prevent a perticular column from being crushed, you can set the `autoCrush` meta option to `false`.
+To prevent a particular column from being crushed, you can set the `autoCrush` meta option to `false`.
 
 ```tsx
 columnHelper.accessor("name", {
@@ -38,6 +38,40 @@ columnHelper.accessor("name", {
 
 <Canvas of={RttuiStories.AutoCrushColumnsExceptName} />
 
+### Crush behavior
+
+By default the crush behavior is to crush the column based on the largest header.
+You can change this by setting the `crushMinSizeBy` prop to `header`, `cell` or `both`.
+
+```tsx
+<ReactTanstackTableUi
+  autoCrushColumns
+  crushMinSizeBy="cell"
+/>
+```
+
+<Story of={RttuiStories.SizeByLargestHeader} />
+
+You can also use meta to configure the crush behavior for a particular column.
+
+```tsx
+columnHelper.accessor("age", {
+  header: "Age",
+  meta: { crushMinSizeBy: "cell" },
+});
+
+<ReactTanstackTableUi
+  autoCrushColumns
+  enableColumnPinning
+  crushMinSizeBy="header"
+/>
+```
+
+<Story of={RttuiStories.SizeByLargestHeaderWithMeta} />
+
+<br /><br />
+
+
 ### Fill available space after crush
 
 If you don't have so many columns and you want the columns to fill all the available space,
@@ -53,7 +87,7 @@ you can set the `autoCrushColumns` prop to `true` and set the `fillAvailableSpac
 />
 ```
 
-To prevent a perticular column from being expanded, you can set the `fillAvailableSpaceAfterCrush` meta option to `false`.
+To prevent a particular column from being expanded, you can set the `fillAvailableSpaceAfterCrush` meta option to `false`.
 
 ```ts
 columnHelper.accessor("name", {
@@ -64,29 +98,6 @@ columnHelper.accessor("name", {
 
 <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:

package/src/stories/ReactTanstackTableUiStory.stories.tsx

@@ -34,7 +34,6 @@ const meta = {
     getCoreRowModel: getCoreRowModel(),
     pinColsRelativeTo: "cols",
     fillAvailableSpaceAfterCrush: false,
-    enableColumnPinning: true,
     scrollbarWidth: 16,
     getRowId: (row) => row.id,
   },
@@ -74,6 +73,7 @@ export const AutoCrushColumns: Story = {
 export const AutoCrushColumnsExceptName: Story = {
   args: {
     autoCrushColumns: true,
+    enableColumnPinning: true,
     meta: {
       name: {
         autoCrush: false,
@@ -97,6 +97,7 @@ export const PinRelativeToCols: Story = {
   args: {
     autoCrushColumns: true,
     pinColsRelativeTo: "cols",
+    enableColumnPinning: true,
     initialState: {
       columnPinning: {
         right: ["city"],
@@ -109,6 +110,7 @@ export const PinRelativeToTable: Story = {
   args: {
     autoCrushColumns: true,
     pinColsRelativeTo: "table",
+    enableColumnPinning: true,
     initialState: {
       columnPinning: {
         right: ["city"],
@@ -187,8 +189,7 @@ export const CanPinRowsRelativeToTable: Story = {
 export const SizeByLargestHeader: Story = {
   args: {
     autoCrushColumns: true,
-    crushMinSizeBy: "header",
-    enableColumnPinning: true,
+    crushMinSizeBy: "cell",
   },
 };
 

package/src/stories/ReactTanstackTableUiStoryComponent.tsx

@@ -65,7 +65,7 @@ export const ReactTanstackTableUi = (
         cell: (info) => (
           <Box sx={{ display: "flex", gap: 2, flex: 1 }}>
             <Typography variant="body2">{info.getValue()}</Typography>
-            <Box sx={{ flexGrow: 1 }} />
+            {props.enableRowPinning && <Box sx={{ flexGrow: 1 }} />}
             {props.enableRowPinning && <RowPinButtons row={info.row} />}
           </Box>
         ),