Styling using Context

[Chris-Petty]

Is your feature request related to a problem? Please describe.

Need easy top level way of providing styling theme to all components of react-native-data-table library.

Describe the solution you'd like

Use Context API in React, make all components subscribe to it and use it.

Describe alternatives you've considered

Passing through styles through props (give Cells/Rows etc. styles prop):

• bad: can be annoying and messy to implement. In-line combining styleSheets will probably trigger unwanted shallow compare diffs (re-render hell, react hooks could memoize, maybe).
• good: does give flexibility to control individual cells.

Maybe sufficient with nesting in styleSheet, though? Perhaps we should do both.

Additional context

Add any other context or screenshots about the feature request here.

[josh-griffin]

@Chris-Petty

I experimented a little with passing a style prop to Row and cell components through renderRow and renderCell - (no stylesheet, just an object), didn't trigger any extra re-renders.

Also tried with context (passing a style object), no extra re-renders either.

I like context, I'm not sure if it's overkill or not. I think theming might be though? It does quite seriously limit the flexibility by only providing essentially margin/padding amounts, colours (I think that's what you mean?)

i.e.

{
    colours: {
        CellBorderColor,
        cellBackgroundColor,
        ...
    }
}

maybe a different shape, i.e. cell: {}, row: {}

Or alternatively, provide styles in context

{
    editableCellStyle,
    rowStyle,
    ...
}

Although this also limits possibilities when using variables to determine styles. i.e. alternating rows - pass two row styles and an alternate prop or something like that? seems a lot easier to just pass through renderRow, renderCell - more flexible and easier?

[Chris-Petty]

The renderProp pattern (renderRow, renderCells) give plenty of flexibility, but the point of anything here is maybe using context to cut down on certain things like having to give textStyle as a prop to pass through the component in every cell. So long as you manage rowState correctly, which can be challenging or at least quite verbose.

Buuut it's not that onerous really. I'm content with 1-2 props for styling things.