Open fobbyal opened 6 years ago
@fobbyal BasicColHeader appears to be the parent component that is extended by different components. ColHeader for flexRenderer & ColHeaderBase for virtualized. There are also other components like ScrollingHeaderRow which appear to be using hardcoded styles though these appear to be for specific cases.
In case of virtualizedRender, I also see Provider component that wraps the entire grid. The structure appears in place to provide default header config through this component. I could not find similar provider component for flexRenderer though. Might need to add a Provider for flexRenderer.
Let me know your thoughts on above analysis.
@fraindz You are correct about the analysis. There are places in both flexRender and virtualizedRender to supply custom render functions for the Headers. However that requires the implementation of the whole render, we often just want some styling changed. Our goal here is to have a Provider that is available to code that are rendering the grid so the styling can be controlled from outside of this library. please see the storybook example at https://github.com/fobbyal/grid-tools/blob/64ef1f2aad06faab52029c90966492d1638a01cf/src/stories/flex/flex.stories.js#L69-L83
By specifying the debug:true
. The gird-tools code-based will log more information when rendering. What we essentially want is to add more props to GridToolContext so we can control the styles of the colHeaders without specifying complex render functions.
@fobbyal That helps. I will make changes and create PR.
Project Background
This is a project that utilized react-virtualized, downshft,react-popper to create a excel-like react component. ( without the function stuff)
Environment
Specification
Header styles are currently hardcoded. We want to make it so that we can customize the header render first.
We want to make it customizable via Context Api. This project currently does support hooks feel free to use
useContext
. Utilize existing src/context.js to handle theme based states.Grid Renders
We currently support 2 types of grids that are rendered by
src/flexRender.js
andvirtualized/virtualizedRenderer.js
. Theses are demoed by the following storybook links respectively. We need the style theme to work for both type of renders.