Skip to content

Commit 67196ea

Browse files
author
Mihran Margaryan
committed
update API.md with new freezeColumns api
1 parent 388eafc commit 67196ea

File tree

1 file changed

+14
-12
lines changed

1 file changed

+14
-12
lines changed

packages/core/API.md

Lines changed: 14 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -13,14 +13,9 @@ or you can create a portal element yourself using the `createPortal` function fr
1313
```jsx
1414
const portalRef = useRef(null);
1515
<>
16-
{
17-
createPortal(
18-
<div ref={portalRef} style="position: fixed; left: 0; top: 0; z-index: 9999;" />,
19-
document.body
20-
)
21-
}
22-
<DataEditor width={500} height={300} portalElementRef={portalRef} {...props} />
23-
</>
16+
{createPortal(<div ref={portalRef} style="position: fixed; left: 0; top: 0; z-index: 9999;" />, document.body)}
17+
<DataEditor width={500} height={300} portalElementRef={portalRef} {...props} />
18+
</>;
2419
```
2520

2621
Once you've got that done, the easiest way to use the Data Grid is to give it a fixed size:
@@ -87,10 +82,10 @@ All data grids must set these props. These props are the bare minimum required t
8782
Most data grids will want to set the majority of these props one way or another.
8883

8984
| Name | Description |
90-
|---------------------------------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
85+
| ------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
9186
| [fixedShadowX](#fixedshadow) | Enable/disable a shadow behind fixed columns on the X axis. |
9287
| [fixedShadowY](#fixedshadow) | Enable/disable a shadow behind the header(s) on the Y axis. |
93-
| [freezeColumns](#freezecolumns) | The number of columns which should remain in place when scrolling horizontally. The row marker column, if enabled is always frozen and is not included in this count. |
88+
| [freezeColumns](#freezecolumns) | The number of columns which should remain in place when scrolling horizontally, or a tuple `[left, right]` to freeze columns on both sides. The row marker column, if enabled is always frozen and is not included in this count. |
9489
| [getCellsForSelection](#getcellsforselection) | Used to fetch large amounts of cells at once. Used for copy/paste, if unset copy will not work. |
9590
| [markdownDivCreateNode](#markdowndivcreatenode) | If specified, it will be used to render Markdown, instead of the default Markdown renderer used by the Grid. You'll want to use this if you need to process your Markdown for security purposes, or if you want to use a renderer with different Markdown features. |
9691
| [onVisibleRegionChanged](#onvisibleregionchanged) | Emits whenever the visible rows/columns changes. |
@@ -192,7 +187,7 @@ Most data grids will want to set the majority of these props one way or another.
192187
| [onRowMoved](#onrowmoved) | Emitted when a row has been dragged to a new location. |
193188
| [preventDiagonalScrolling](#preventdiagonalscrolling) | Prevents diagonal scrolling |
194189
| [rowSelectionMode](#rowselectionmode) | Determines if row selection requires a modifier key to enable multi-selection or not. |
195-
| [columnSelectionMode](#columnselectionmode) | Determines if column selection requires a modifier key to enable multi-selection or not. |
190+
| [columnSelectionMode](#columnselectionmode) | Determines if column selection requires a modifier key to enable multi-selection or not. |
196191
| [scrollToEnd](#scrolltoend) | When set to true, the grid will scroll to the end. The ref has a better method to do this and this prop should not be used but it will remain supported for the foreseeable future. |
197192
| [showMinimap](#showminimap) | Shows the interactive minimap of the grid. |
198193
| [validateCell](#validatecell) | When returns false indicates to the user the value will not be accepted. When returns a new GridCell the value is coerced to match. |
@@ -550,11 +545,18 @@ getCellContent: (cell: Item) => GridCell;
550545
## freezeColumns
551546

552547
```ts
553-
freezeColumns?: number;
548+
freezeColumns?: number | readonly [left: number, right: number];
554549
```
555550

556551
Set to a positive number to freeze columns on the left side of the grid during horizontal scrolling.
557552

553+
Alternatively, pass a tuple `[left, right]` where:
554+
555+
- `left` is the number of columns to freeze on the left side
556+
- `right` is the number of columns to freeze on the right side
557+
558+
Note: The row marker column, if enabled, is always frozen and is not included in the left freeze count.
559+
558560
---
559561

560562
## getCellsForSelection

0 commit comments

Comments
 (0)