How best to handle internationalization? This is not just for translation but for translating key values to human readable strings, from both column headings and cell contents which are values rather than human-readable sentences.

Probably best is pass translations as a prop, and then use custom cell and header renderers to parse strings. Can default to at least converting _ to space and changing to sentence case if no translation exists.

Each row should have a checkbox allowing multiple rows to be selected, and a checkbox in the header to select all rows. We should add contextual buttons for actions on selected rows:

We can handle row select as state, with callbacks for each action button. We could maybe have some default actions that could be turned on and off by props.

Clicking a column header should sort, following these guidelines / style.

This can be handled by internal state - there is no need to save this in app state.

We need to make a shallow copy of this.props.rows to avoid mutating that when we sort.

We try to be smart about how many columns to show. Right now which columns are shown is completely arbitrary, but can be configured, see get-column-nodes.jsx#L18-L54.

We could be smarter, making some reasonable guesses about which columns should be shown and which order (date field first?).

Column widths are all currently set to the same using flexGrow, we could be smarter about this setting some kind of auto-width. Rendering all the rows to calculate width would not be scalable, but we could use number of characters to approximate relative column widths. Parsing a long array of JSON objects for string lengths should not take too long.

What is the best API for column configuration? Right now it is different arrays: columnOrder, columnPriority, columnBlacklist. Maybe better to have a single array of objects to configure columns?

Column priority is not currently implemented. The idea is that given columns ['a','b','c', 'd'] which all show on a larger display, we might want ['a','c', 'd'] on tablets and ['a', 'd'] on mobile. Maybe we only need to sign a numeric priority to each column, rather than using an array that assigns a priority to each one? Maybe too much work for now.

We display a subset of columns based on screen set. Each column should be configurable via a drop-down that shows a list of hidden columns that you can switch to.

Currently this dropdown is rendered with DropDownMenu but it would be better to bring up the menu via an edit icon and keep the column header click for sorting:

The menu is currently mainly hidden because of overflow: hidden set on fixed-data-table. We need to render via a portal to escape this.

Probably easiest would be to render a material-ui Menu on a button click into a portal and overlaid.

The table itself should not handle a state change, but instead fire an event handler "onColumnChanged" and the wrapper component should update props accordingly. This allows us to manage this state within application config, so that when we return to the table view we keep the column configuration.

Would be nice to show an icon on each row to indicate if the record has an image and/or a location. Need to think of a UI for this, maybe buttons at the start of the row like this and this. Need to figure out how to parse row data to guess if there is an image and/or location.