HOC for Table configuration
This HOC wraps the <Table
component and adjusts the table display based on user preferences for:
- Column order: users can reorder columns
- Column visibility: Users can hide/show a column
- Column display: width, text wrapping
<Table
already accepts a list of columns to display, the HOC manages the list<Table
needs to accept a list ofhidden
columns.`-
<Table
needs to accept a map of column rendering settings
On the other hand, the HOC needs to receive updates from the <Table
when users make changes to its display. <Table
fires events:
columnResized(column, width)
columnHidden(column)
columnChanged(columnSettings)
The event columnChanged
should report only the settings that are modified from the defaults.
columnSettings
allows the table to report any display preference changes and the HOC to provide the initial list of column settings:
{
"key": { "align": "right", "wrap": true, "width": 300 },
"key2": { "hidden": true },
...
}
The table settings are persisted in localStorage
under a specific key for each table. Where does the key come from?