I am using DevExtreme React grid, which is awesome. We'll be using a number of grids throughout several apps that will have the same functionality - sorting, filtering, selection, etc. , so it is is a little verbose to wire this up for each grid page.
So I planned to wrap the Grid and then we can use this pre-wired grid. However I could see us using a Paged pattern, or a Virtual scrolling pattern. So I planned to have "BaseGrid" that wraps the DevExtreme grid, and then a PageGrid and VirtualGrid that wraps the BaseGrid:
const BaseGrid = (children, ...props) => (
<DevExtremeGrid rootComponent={MyCustomStyledRootGrid} ...props>
// add sorting, searching, selection wiring
{children}
</DevExtrememeGrid>
);
export default BaseGrid;
..
const PagedGrid = (children, ...props) => (
<BaseGrid ...props>
// add paging wiring, custom style Table
{children}
</BaseGrid>
);
export default PagedGrid;
..
const VirtualGrid = (children, ...props) => (
<BaseGrid ...props>
// add virtual scrolling wiring, custom style Table
{children}
</BaseGrid>
);
export default VirtualGrid;
Is anything wrong with this re-wrapping pattern? It feels like the wrong thing to do in React. I'm just trying to make life easier but don't want to fall in the trap of over-abstracting.
Aucun commentaire:
Enregistrer un commentaire