tomdye
commented
3 years ago Customising rows / columns
The previous grid has a large columns: ColumnConfig[] property passed to it which includes various flags and custom renderers. Recently we have moved to children for custom renderers elsewhere so we should look to do the same for the new grid.
options / POCs below
Child row render function
We should use a children render function which is expected to return a <Row> and optionally associated <Cell> widgets. The function would be passed the column config, the item it is to render and the row index. The Grid would export Row and Cell widgets for this render function to use.
<Grid
resource={resource({ template, initOptions: { id, data } })}
columns={columns}
>
{(columns, item, index) => {
return <Row columns={columns} item={item} index={index}>
<Cell>{item.id}</Cell>
<Cell>{item.firstName}</Cell>
<Cell>{item.lastName}</Cell>
</Row>;
}}
</Grid>A draw back of this approach is that if the user returned anything other then cells as the children of the row then the layout mechanism for cells would likely be broken. Furthermore, if the user wishes to customise the Row to add different styling / functionality etc then they would need to ensure that the appropriate css was added to it in order to facilitate the laying out of the cells.
The user would be responsible for passing on resize / editable props etc to the Cell.
The above implementation could also be enhanced to receive a middleware to provide the appropriate properties for each cell for a given row. This would simplify the usage.
Header row customisation
If we allow header cell customisation then we could use a similar approach to the child row renderers and create a middleware that can be used to connect up future filter / sort functionality to the <HeaderCell> it renders. This would give users the flexibility to create their own HeaderCell implementation or to customise the content of the standard HeaderCell widgets.
<Grid
resource={resource({ template, initOptions: { id, data } })}
columns={columns}
>
{(columns, middleware) => {
return
<HeaderRow>
<HeaderCell {...middleware('id')}>ID</HeaderCell>
<HeaderCell {...middleware('firstName')}>First Name</HeaderCell>
<HeaderCell {...middleware('lastName')}>Surname</HeaderCell>
</HeaderRow>;
}}
</Grid>Cell only customisation
Doing away with the Row render completely we could just allow for Cell renders to be passed and expect the function to return an array of Cell widgets. We could create a middleware for this purpose which would return the props to use on the <Cell> and the value to base the display text from. ie.
<Grid
resource={resource({ template, initOptions: { id, data } })}
columns={columns}
>
{(columns, cell) => ([
<Cell {...cell.props('id')}>{cell.value('id')}</Cell>,
<Cell {...cell.props('firstName')}>{cell.value('firstName')}</Cell>,
<Cell {...cell.props('lastName')}>{cell.value('lastName')}</Cell>
])}
</Grid>
Enhancement
We should write a new grid utilising resources and function based approaches as per patterns used in recent widgets.