@mini_7/material-react-table-mcp 4.0.0

package/data/guides/column-hiding.md

@@ -0,0 +1,133 @@
+## Column Hiding Feature Guide
+
+The column hiding feature is enabled by default and allows the user to hide data columns from either the column actions menu or the show/hide columns menu.
+
+### Relevant Table Options
+
+Relevant table options (get_mrt_api has full details):
+
+- `enableHiding` - type `boolean` - default `true`
+- `onColumnVisibilityChange` - type `OnChangeFn<ColumnVisibilityState>` - If provided, this function will be called with an updaterFn when state.columnVisibility changes. This overrides the default internal state management, so you will need to persist the state change either fully or partially outside of the table.
+
+### Relevant Column Options
+
+Relevant column options (get_mrt_api has full details):
+
+- `enableHiding` - type `boolean`
+- `visibleInShowHideMenu` - type `boolean` - default `true` - Set to false if you want to hide a column from the show/hide menu.
+
+### Relevant State
+
+Relevant state options (get_mrt_api has full details):
+
+- `columnVisibility` - type `Record<string, boolean>` - default `{}` - an object mapping column IDs to a boolean indicating whether the column is currently visible
+
+### Hide Some Columns by Default
+
+You can easily hide columns by default by setting the `columnVisibility` `state` or `initialState` to hide the desired columns by id.
+
+```jsx
+const table = useMaterialReactTable({
+  columns,
+  data,
+  initialState: { columnVisibility: { firstName: false } }, //hide firstName column by default
+});
+
+return <MaterialReactTable table={table} />;
+```
+
+### Dynamically Hide Columns
+
+If you need to control how the columns are hidden dynamically, you can use `state` instead of `initialState` along with the `onColumnVisibilityChange` table option. Or alternatively you can use the `setColumnVisibility` table instance api.
+
+```jsx
+const [columnVisibility, setColumnVisibility] = useState({
+  firstName: false,
+});
+
+useEffect(() => {
+  setColumnVisibility({ firstName: true }); //programmatically show firstName column
+}, [someDependency]);
+
+const table = useMaterialReactTable({
+  columns,
+  data,
+  state: { columnVisibility }, //manage columnVisibility state
+  onColumnVisibilityChange: setColumnVisibility,
+});
+
+//NOTE: Instead of managing the columnVisibility state yourself, we could call a table instance api
+table.setColumnVisibility({ firstName: true }); //programmatically show firstName column
+```
+
+### Disable Column Hiding
+
+If you do not want this feature to be enabled at all, you can disable it by setting the `enableHiding` table option to `false`.
+
+```jsx
+const table = useMaterialReactTable({
+  columns,
+  data,
+  enableHiding: false,
+});
+```
+
+Alternatively, you can disable hiding specific columns by setting the `enableHiding` column option to `false` per column.
+
+If you want to hide certain columns by default, you can specify column visibility in the `initialState.columnVisibility` table option.
+
+> Live example: `disable-column-hiding` (call get_mrt_example with that id).
+
+### Enable Column Hiding on Display Columns
+
+By default, column hiding is only enabled on data columns. Display columns, such as `mrt-row-numbers`, `mrt-row-select`, etc., do not have column hiding enabled, and their toggle will be disabled. You can turn that back on by setting the `enableHiding` option to `true` in the `displayColumnsOptions` table option.
+
+```jsx
+const table = useMaterialReactTable({
+  columns,
+  data,
+  displayColumnDefOptions: {
+    'mrt-row-numbers': {
+      enableHiding: true, //now row numbers are hidable too
+    },
+  },
+});
+```
+
+See the [Display Columns Feature Guide](/docs/guides/display-columns#display-column-definition-options-prop) for a more in depth explanation of the `displayColumnsOptions` table option.
+
+### Hide Column From Show Hide Menu
+
+> New in v2.3.0
+
+By default, all columns are visible in the column show hide menu that is opened from the columns button in the toolbar internal actions button. You can hide a column from this menu by setting the `visibleInShowHideMenu` column option to `false`.
+
+```jsx
+const columns = [
+  {
+    accessorKey: 'uuid',
+    header: 'UUID',
+    visibleInShowHideMenu: false, //hide this column from the show hide menu, but still show the column in the table
+  },
+];
+
+const table = useMaterialReactTable({
+  columns,
+  data,
+  displayColumnDefOptions: {
+    'mrt-row-actions': {
+      visibleInShowHideMenu: false, //hide the built-in row actions column from the show hide menu
+    },
+  },
+});
+```
+
+### Custom Columns Menu
+
+The `MRT_ShowHideColumnsMenu` component is one of the few MRT components that is pretty opinionated and not easily customizable. Instead of trying to customize the menu with overrides, it might be easier for you to just build your own new button and menu from scratch using the Table and Column Instance APIs.
+
+Adding your own Toolbar Buttons is covered in the [Toolbar Guide](/docs/guides/toolbar-customization#customize-built-in-internal-toolbar-button-area)
+
+If all you want to do is customize the buttons above the columns menu, you can import and use the `MRT_ShowHideColumnsMenuItems` component from material react table, which is a component that renders the columns in the list with the toggle switches, but then render your own buttons in the top or bottom of the menu itself.
+
+View Extra Storybook **[Examples](https://www.material-react-table.dev/?path=/story/features-column-hiding-examples)**

package/data/guides/column-ordering-dnd.md

@@ -0,0 +1,99 @@
+## Column Ordering (DnD) Feature Guide
+
+Whether you just want to change the default column order in your table or let columns be reordered by dragging and dropping, Material React Table has a simple API for this.
+
+### Relevant Table Options
+
+Relevant table options (get_mrt_api has full details):
+
+- `enableColumnDragging` - type `boolean` - default `false`
+- `enableColumnOrdering` - type `boolean`
+- `onColumnOrderChange` - type `OnChangeFn<ColumnOrderState>` - If provided, this function will be called with an updaterFn when state.columnOrder changes. This overrides the default internal state management, so you will need to persist the state change either fully or partially outside of the table.
+- `onDraggingColumnChange` - type `OnChangeFn<MRT_Column<TData> | null>`
+- `onHoveredColumnChange` - type `OnChangeFn<MRT_Column<TData> | null>`
+
+### Relevant Column Options
+
+Relevant column options (get_mrt_api has full details):
+
+- `enableColumnDragging` - type `boolean` - Enable or disable column dragging for this column.
+- `enableColumnOrdering` - type `boolean`
+
+### Relevant State
+
+Relevant state options (get_mrt_api has full details):
+
+- `columnOrder` - type `Array<string>` - default `[]` - an array of strings representing the current order of the table columns
+- `draggingColumn` - type `MRT_Column | null` - a variable representing the currently dragged column
+- `hoveredColumn` - type `MRT_Column | null`
+
+### Change the Default Column Order
+
+By Default, Material React Table will order the columns in the order they are defined in the `columns` table option. And Display Columns such as Actions, Selection, Expansion, etc., get added to either the beginning or the end of the table. You can customize all of this by defining your own `columnOrder` state and passing it either to the `initialState` or `state` table options.
+
+The `columnOrder` state is an array of string column ids, that come from the ids or accessorKeys that you defined in your column definitions.
+
+If you are enabling features that generate built-in MRT display columns such as `enableRowSelection`, `enableRowNumbers`, `enableRowActions`, etc., you should include those column ids in your `columnOrder` state at the index you want them to appear in the table. If you do not include them, MRT should automatically insert them at either the beginning or the end of the table just fine, but it might not be in the order you want.
+
+See the [Display Columns Guide](/docs/guides/display-columns) for more information on what `"mrt-row-\*"` column ids are available.
+
+```jsx
+const table = useMaterialReactTable({
+  data,
+  columns,
+  enableRowSelection: true,
+  initialState: {
+    columnOrder: [
+      'name',
+      'email',
+      'phone',
+      'city',
+      'country',
+      'mrt-row-select', //move the built-in selection column to the end of the table
+    ],
+  },
+});
+
+return <MaterialReactTable table={table} />;
+```
+
+> **Note:** If the number of `columns` and the length of the `columnOrder` state do not match, MRT will automatically re-generate the `columnOrder` state internally as of v2.10.0.
+
+### Manage Column Order State
+
+If you need easier access to the `columnOrder` state, you can store the column order in your own state management, and then pass it back into the MRT `state` table option and sync back up internal mutations with the `onColumnOrderChange` callback.
+
+You should also should initialize the `columnOrder` state yourself for the best results. Though, as of v2.10.0, if you do not initialize the `columnOrder` state, as Material React Table will generate a default column order for you based on the order of the columns passed in the `columns` option, so you only need to properly initialize the column order state if there is a problem with the default order.
+
+```jsx
+const columns = [
+  //...
+];
+
+//easy shortcut to initialize the columnOrder state as array of column ids
+const [columnOrder, setColumnOrder] = useState(
+  ['mrt-row-select', ...columns.map((c) => c.accessorKey)], //array of column ids (Initializing is optional as of v2.10.0)
+);
+
+const table = useMaterialReactTable({
+  data,
+  columns,
+  enableRowSelection: true,
+  state: {
+    columnOrder,
+  },
+  onColumnOrderChange: setColumnOrder,
+});
+
+return <MaterialReactTable table={table} />;
+```
+
+### Enable Column Ordering with Drag and Drop
+
+Material React Table has a built-in drag and drop feature to reorder columns. This feature is enabled by passing the `enableColumnOrdering` table option.
+
+The ability for a column to have a drag and drop handle can be specified by setting the `enableColumnOrdering` option on the column.
+
+> Live example: `enable-column-ordering` (call get_mrt_example with that id).
+
+View Extra Storybook **[Examples](https://www.material-react-table.dev/?path=/story/features-column-ordering-examples)**

package/data/guides/column-pinning.md

@@ -0,0 +1,72 @@
+## Column Pinning Feature Guide
+
+Column pinning is a cool feature that lets users pin (freeze) columns to the left or right of the table. Pinned columns will not scroll horizontally with the rest of the columns so that they always stay visible to the user.
+
+### Relevant Table Options
+
+Relevant table options (get_mrt_api has full details):
+
+- `enableColumnPinning` - type `boolean`
+- `onColumnPinningChange` - type `OnChangeFn<ColumnPinningState>` - If provided, this function will be called with an updaterFn when state.columnPinning changes. This overrides the default internal state management, so you will need to persist the state change either fully or partially outside of the table.
+
+### Relevant Column Options
+
+Relevant column options (get_mrt_api has full details):
+
+- `enablePinning` - type `boolean`
+
+### Relevant State
+
+Relevant state options (get_mrt_api has full details):
+
+- `columnPinning` - type `{ left: Array<string>, right: Array<string> }` - default `{ left: [], right: [] }` - an object with left and right properties, each of which is an array of strings representing the columns that are pinned to the left or right side of the table
+
+### Enable Column Pinning
+
+Column pinning can simply be enabled by setting the `enableColumnPinning` table option to `true`.
+
+```jsx
+const table = useMaterialReactTable({
+  data,
+  columns,
+  enableColumnPinning: true,
+});
+
+return <MaterialReactTable table={table} />;
+```
+
+### Pin (Freeze) Columns By Default
+
+Columns can start out pinned in your table by setting the `columnPinning` states in `initialState` or `state`.
+
+```jsx
+const table = useMaterialReactTable({
+  data,
+  columns,
+  enableColumnPinning: true,
+  initialState: { columnPinning: { start: ['email'] } }, //pin email column to the start by default
+});
+
+return <MaterialReactTable table={table} />;
+```
+
+### Apply Absolute Column Widths
+
+You might consider using the `layoutMode: 'grid-no-grow'` table option to give all columns an exact width if you don't want the columns collapsing a little while scrolling. Some people like this subtle behavior, but others do not.
+
+```jsx
+const table = useMaterialReactTable({
+  data,
+  columns,
+  enableColumnPinning: true,
+  layoutMode: 'grid-no-grow',
+});
+
+return <MaterialReactTable table={table} />;
+```
+
+#### Column Pinning Example
+
+> Live example: `enable-column-pinning` (call get_mrt_example with that id).
+
+View Extra Storybook **[Examples](https://www.material-react-table.dev/?path=/story/features-column-pinning-examples)**

package/data/guides/column-resizing.md

@@ -0,0 +1,157 @@
+## Column Resizing Feature Guide
+
+Material React Table has a built-in column resizing draggable handle feature.
+
+> The Column Size features was recently split into its own [Guide](/docs/guides/column-size). View that guide as a prerequisite to this one.
+
+### Relevant Table Options
+
+Relevant table options (get_mrt_api has full details):
+
+- `columnResizeDirection` - type `'ltr' | 'rtl'` - default `muiTheme.direction || 'ltr'` - Determines the direction of column resizing. ltr = left to right, rtl = right to left.
+- `columnResizeMode` - type `'onEnd' | 'onChange'` - default `'onChange'` - Determines when the columnSizing state is updated. onChange updates the state when the user is dragging the resize handle. onEnd updates the state when the user releases the resize handle.
+- `defaultColumn` - type `Partial<MRT_ColumnDef<TData>>` - Default column options to use for all column defs supplied to the table. This is useful for providing default cell/header/footer renderers, sorting/filtering/grouping options, etc.
+- `defaultDisplayColumn` - type `Partial<MRT_DisplayColumnDef<TData>>` - Default column options to use for all display column defs supplied to the table. This is useful for providing default cell/header/footer renderers, or turning on or off certain features for all display columns.
+- `displayColumnDefOptions` - type `{ [key: string]: MRT_DisplayColumnDef<TData> }` - Customize and override the column definition options for the built-in display columns. (Select, Expand, Row Actions, etc.)
+- `enableColumnResizing` - type `boolean`
+- `layoutMode` - type `'semantic' | 'grid' | 'grid-no-grow'` - default `'semantic' //(changes based on other enabled features)`
+- `onColumnResizingChange` - type `OnChangeFn<MRT_ColumnResizingState>` - This optional function will be called when the columnResizing state changes. If you provide this function, you will be responsible for maintaining its state yourself. You can pass this state back to the table via the state.columnSizingInfo table option.
+- `onColumnSizingChange` - type `OnChangeFn<ColumnSizingState>` - This optional function will be called when the columnSizing state changes. If you provide this function, you will be responsible for maintaining its state yourself. You can pass this state back to the table via the state.columnSizing table option.
+
+### Relevant Column Options
+
+Relevant column options (get_mrt_api has full details):
+
+- `enableResizing` - type `boolean`
+- `grow` - type `boolean | number` - If `layoutMode` is `'grid'` or `'grid-no-grow'`, you can specify the flex grow value for individual columns to still grow and take up remaining space, or set to `false`/0 to not grow.
+- `maxSize` - type `number` - default `1000`
+- `minSize` - type `number` - default `40`
+- `size` - type `number` - default `180`
+
+### Relevant State
+
+Relevant state options (get_mrt_api has full details):
+
+- `columnResizing` - type `See TanStack Docs` - default `{}` - an object containing information about column sizing
+- `columnSizing` - type `Record<string, number>` - default `{}` - an object mapping column IDs to their current width in pixels
+
+### Initial Column Sizes
+
+Column sizes will behave differently depending on which `layoutMode` you have set.
+
+See the [Column Size Guide](/docs/guides/column-size) for more information on layout modes and how to set initial column sizes properly for you use case.
+
+### Enable Column Resizing Feature
+
+`enableColumnResizing` is the boolean table option that enables the column resizing feature.
+
+```jsx
+const table = useMaterialReactTable({
+  columns,
+  data,
+  enableColumnResizing: true,
+});
+
+return <MaterialReactTable table={table} />;
+```
+
+You can disable specific columns from being resizable by setting the `enableResizing` column option to false in their respective column definition.
+
+### Column Resize Mode
+
+The default `columnResizeMode` is `onChange` (in MRT versions v1.7+), which means that the column resizing will occur immediately as the user drags the column resize handle. If you are running into performance issues because of many other enabled features, you might want to set the `columnResizeMode` to `onEnd` instead. This will make the column resizing only occur after the user has finished dragging the column resize handle and released their mouse.
+
+```jsx
+const table = useMaterialReactTable({
+  columns,
+  data,
+  enableColumnResizing: true,
+  columnResizeMode: 'onEnd', //instead of the default "onChange" mode
+});
+```
+
+> Live example: `enable-column-resizing` (call get_mrt_example with that id).
+
+### Column Growing
+
+> MRT V3 has a new "opposite" behavior in regards to column sizes when column resizing is enabled compared to MRT V3
+
+When column resizing is enabled, by default, a layoutMode of `"grid-no-grow"` will be applied internally. This means that columns will have an absolute size and they will NOT grow to fill in the remaining space of the table. You can let columns grow to fill in the remaining space by changing the `layoutMode` back to `"grid"` or `"semantic"`.
+
+```jsx
+const table = useMaterialReactTable({
+  columns,
+  data,
+  enableColumnResizing: true,
+  layoutMode: 'grid', //instead of the default "grid-no-grow" when column resizing is enabled
+});
+```
+
+Alternatively, if you only want certain columns to grow to fill the remaining space, you can set the `grow` column option to `true` in their respective column definitions.
+
+```jsx
+const columns = [
+  //...
+  {
+    accessorKey: 'address',
+    header: 'Address',
+    size: 250,
+    grow: true, //allow this column to grow to fill the remaining space
+  },
+];
+```
+
+This is discussed in more detail in the [Column Size Guide](/docs/guides/column-size#column-grow).
+
+### Column Resize Direction
+
+> New in V3.1
+
+If you are displaying your table in a RTL (right-to-left) language, you can set the `columnResizeDirection` table option to `"rtl"` to make the column resize handle appear on the left side of the column instead of the right side. This may behave differently depending on which Emotion or MUI theme settings you have enabled.
+
+If you have already set the proper `theme.direction` setting in your MUI theme, then this option will already have been set automatically for you, but you can still override it using the `columnResizeDirection` table option.
+
+```jsx
+const table = useMaterialReactTable({
+  columns,
+  data,
+  enableColumnResizing: true,
+  columnResizeDirection: 'rtl', //instead of the default "ltr" direction
+});
+
+return (
+  <div style={{ direction: 'rtl' }}>
+    {' '}
+    {/* app-wide style? */}
+    <MaterialReactTable table={table} />
+  </div>
+);
+```
+
+> Live example: `localization-i18n-fa` (call get_mrt_example with that id).
+
+### Enable Resizing on Built-in Display Columns
+
+As discussed further in the [Display Columns Guide](/docs/guides/display-columns), you can customize the options of the built-in columns that get generated under the hood by MRT by enabling certain features.
+
+Here, we can enable column resizing on the built-in row numbers column by setting the `enableResizing` column option to true in the `displayColumnDefOptions` table option.
+
+```jsx
+const table = useMaterialReactTable({
+  columns,
+  data,
+  displayColumnDefOptions: {
+    'mrt-row-numbers': {
+      enableResizing: true, //allow the row numbers column to be resized
+      size: 40,
+      grow: false, //new in v2.8 - do not fill remaining space using this column
+    },
+  },
+  enableRowNumbers: true,
+  layoutMode: 'grid', // `grow` only works in the grid* layout modes
+});
+
+return <MaterialReactTable table={table} />;
+```
+
+View Extra Storybook **[Examples](https://www.material-react-table.dev/?path=/story/features-column-resizing-examples)**

package/data/guides/column-size.md

@@ -0,0 +1,162 @@
+## Column Size Feature Guide
+
+Material React Table lets you easily change the default widths (sizes) of columns.
+
+### Relevant Table Options
+
+Relevant table options (get_mrt_api has full details):
+
+- `defaultColumn` - type `Partial<MRT_ColumnDef<TData>>` - Default column options to use for all column defs supplied to the table. This is useful for providing default cell/header/footer renderers, sorting/filtering/grouping options, etc.
+- `defaultDisplayColumn` - type `Partial<MRT_DisplayColumnDef<TData>>` - Default column options to use for all display column defs supplied to the table. This is useful for providing default cell/header/footer renderers, or turning on or off certain features for all display columns.
+- `displayColumnDefOptions` - type `{ [key: string]: MRT_DisplayColumnDef<TData> }` - Customize and override the column definition options for the built-in display columns. (Select, Expand, Row Actions, etc.)
+- `layoutMode` - type `'semantic' | 'grid' | 'grid-no-grow'` - default `'semantic' //(changes based on other enabled features)`
+
+### Relevant Column Options
+
+Relevant column options (get_mrt_api has full details):
+
+- `grow` - type `boolean | number` - If `layoutMode` is `'grid'` or `'grid-no-grow'`, you can specify the flex grow value for individual columns to still grow and take up remaining space, or set to `false`/0 to not grow.
+- `maxSize` - type `number` - default `1000`
+- `minSize` - type `number` - default `40`
+- `size` - type `number` - default `180`
+
+### Relevant State
+
+Relevant state options (get_mrt_api has full details):
+
+- `columnSizing` - type `Record<string, number>` - default `{}` - an object mapping column IDs to their current width in pixels
+
+### Layout Modes
+
+Material React Table has 3 layout modes that affect how columns styles are applied internally. Depending on which features you enable, the `layoutMode` table option will automatically change to the appropriate value, though you can override it with your own value if you want.
+
+1. `"semantic"` (default with default features) - uses default css styles that come with `<table>`, `<tr>`, `<td>`, etc. elements.
+2. `"grid"` (default when virtualization is enabled) - uses CSS Grid and Flexbox styles instead of default styles.
+3. `"grid-no-grow"` (default when column resizing is enabled) - uses CSS Grid and Flexbox styles, but also sets `flex-grow: 0` on all columns and adds an empty "spacer" column to the end of the table to fill the potential remaining space.
+
+If you want your columns to have an absolute width, you can use the `"grid-no-grow"` layout mode and set the `size` option on each column.
+
+### Column Size
+
+You can change the width of any column by setting its `size` option on the column definition. There are `minSize` and `maxSize` column options available to enforce limits during resizing events.
+
+The `size`, `minSize`, and `maxSize` do not take in any CSS width unit. They are only numbers that represent the width of the column in pixels.
+
+```jsx
+const columns = [
+  {
+    accessorKey: 'id',
+    header: 'ID',
+    grow: false, //don't allow this column to grow to fill in remaining space - new in v2.8
+    size: 50, //small column
+  },
+  {
+    accessorKey: 'username',
+    header: 'Username',
+    minSize: 100, //min size enforced during resizing
+    maxSize: 400, //max size enforced during resizing
+    size: 180, //medium column
+  },
+  {
+    accessorKey: 'email',
+    header: 'Email',
+    grow: true, //allow this column to grow to fill in remaining space - new in v2.8
+    size: 300, //large column
+  },
+];
+```
+
+### Column Grow
+
+> New in v2.8 - You can now set a `grow` column option if using layoutMode `"grid-no-grow"` or `"grid"`
+
+You can also set `grow` properties on the column definitions when using layoutMode `"grid-no-grow"` or `"grid"`.
+
+If the layout mode of your table is `"grid"` and you set `grow: false` on a column, that column will have a fixed size and will not grow to fill in the remaining space of the table.
+
+If the layout mode of your table is `"grid-no-grow"` and you set `grow: true` on a column, that column will grow to fill in the remaining space of the table.
+
+If the layout mode of your table is `"grid-no-grow"` and you set `grow: 1` on one column, and `grow: 2` on another column, the first column will grow to fill in 1/3 of the remaining space of the table, and the second column will grow to fill in 2/3 of the remaining space of the table.
+
+If the layout mode of your table is `"semantic"`, the `grow` column option will have no effect, but columns will size themselves to fit their own content better than the other layout modes.
+
+### But I Want My Columns to Have a Percentage Width
+
+Material React Table is not designed to use percentage column widths well by default. This is because having horizontal scrollbars on tables is both a very common use case, and usually the best way to ensure that the actual content of the cells in each column is visible and not cutoff or wrapped excessively.
+
+If you disagree with that, that's fair, and you're not out of luck. Material React Table exposes all mui props, so if you really want to, you can add whatever CSS you want to achieve your own custom column widths behavior. This is not recommended by the maintainer, but some developers have found it useful to set all column sizes and minSizes to a very small number like `1`, `1.5`, `2`, ect., and then use either `layoutMode: "semantic"` or `layoutMode: "grid"`. This makes the columns act more like they are using percentage widths, up until a certain point. If you really need to never have a horizontal scrollbar, you can edit the `muiTableContainerProps.sx` styles to set `overflowX: "hidden"`. Be very careful with this though, as this could cause your table to be unusable on smaller screens.
+
+If the above still does not get you to where you need to be, `muiTableHeadCellProps.sx`, `muiTableBodyCellProps.sx`, and `muiTableFooterCellProps.sx` and more are all exposed and available to you to override with whatever custom CSS that you need. Just be aware that non of the built-in TanStack Table size APIs will be accurate anymore.
+
+#### Side Note: Just Make Your Scrollbars Prettier
+
+Making your scrollbars look better (especially on Windows and Linux) can go a long way to not letting a horizontal scrollbar ruin the look of your table.
+
+Here's what this docs site uses in its global CSS to make scrollbars to more like the default Mac OS scrollbars for everyone:
+
+```css
+::-webkit-scrollbar-track {
+  background-color: transparent;
+}
+
+::-webkit-scrollbar {
+  right: 0;
+  width: 12px;
+  height: 12px;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: #999;
+  border-radius: 8px;
+  width: 12px;
+  height: 12px;
+}
+```
+
+### Default Column
+
+By default, columns will have the following size properties defined:
+
+```jsx
+defaultColumn = { minSize: 40, maxSize: 1000, size: 180 }; //units are in px
+```
+
+You can modify the default column widths by setting the `defaultColumn` table option on the table.
+
+```jsx
+const table = useMaterialReactTable({
+  columns,
+  data,
+  defaultColumn: {
+    minSize: 20, //allow columns to get smaller than default
+    maxSize: 9001, //allow columns to get larger than default
+    size: 260, //make columns wider by default
+  },
+});
+```
+
+### Change Sizes of Built-in Display Columns
+
+As discussed further in the [Display Columns Guide](/docs/guides/display-columns), you can customize the options of the built-in columns that get generated under the hood by MRT by enabling certain features.
+
+```jsx
+const table = useMaterialReactTable({
+  columns,
+  data,
+  displayColumnDefOptions: {
+    'mrt-row-select': {
+      size: 50, //adjust the size of the row select column
+      grow: false, //new in v2.8 (default is false for this column)
+    },
+    'mrt-row-numbers': {
+      size: 40,
+      grow: true, //new in v2.8 (allow this column to grow to fill in remaining space)
+    },
+  },
+  enableRowNumbers: true,
+});
+
+return <MaterialReactTable table={table} />;
+```
+
+View Extra Storybook **[Examples](https://www.material-react-table.dev/?path=/story/styling-custom-column-widths)**