React Grid Resizable
Install
npm install --save netcell/react-grid-resizable
Development
npm install
npm start
Navigate to the url displayed in the terminal. (Normally http://localhost:1234
)
Usage
;
Put multiple Row
tags inside a RowsWrapper
tag for a grid of rows and multiple Col
tags inside a ColsWrapper
tag for a grid of columns.
// Grid of rows // Grid of columns
These tags can also be nested :
// Columns inside a row // Rows inside a column
Wrappers
RowWrapper
and CellWrapper
tags accept an object props separatorProps
that allows you to pass children
, style
and className
props to the separators of the grid.
For example:
Rows & Cols
Row
and Col
tags accept style
and className
props for customizing the rows and columns.
Initial Size
Row
and Col
tags accept initialHeight
for Row
tag and initialWidth
for Col
tag to set the initial size of the rendered elements. If these props are omitted, the rendered element will be assigned css property flex: 1
.
Disable Separator
Row
and Col
tags accept a set of resize options to disable specific separators from resizing it.
For example:
// This row won't be resized by the separator above it// This column won't be resized by the separator after it// This column won't be resized at all
Setting props top
and bottom
doesn't have any effect on Col
tags and setting props left
and right
doesn't have any effect on Row
tags.