Feature suggestions for StudioTableLocalPagination component

[mgunnerud]

Description

In resource admin, at the moment there are two implementations of tables (one mui table and one table from designsystemet). Having replaced both with StudioTableLocalPagination, I see some possible improvements:

Allow sorting per column In resource admin, we have a column which is created from an array (and rendered as JSX), which doesn't really make sense to sort by. In the current StudioTableLocalPagination component it is not possible to disable sorting for this column without disabling sorting for the whole table.

Add a valueFormatter function for columns In mui, column configuration allows for a valueFormatter function which can return a different value than the raw data value of the cell. This is useful for for example date columns. Consider the following example: there are three rows with dates 31.12.23, 22.01.22 and 01.01.24. Sorting these as strings in ascending order will show the order "01.01.24", "22.01.22", "31.12.23", since these are strings. Instead, a valueFormatter could be used to format the display value on render, while keeping the undelying data as dates. We also display 9-digit organization numbers in a column, and we have a formatter which adds an aria-label on these cells so screen readers will read the organization number one digit at a time, instead of as a large number.

Allow styling of columns Some of the tables in resource admin use set column widths in percent, specified in css. There should be an option to add css classes to column config to specify column width (or other styling)

Additional Information

No response

[framitdavid]

Thanks for your feature request, @mgunnerud! First of all, I agree that the component could be made more flexible. Is this something you or your team could contribute with? 😊

[ErlingHauan]

Very good suggestions, @mgunnerud! 😄 I'm already adding a simple column width setting to the StudioTable components in issue #9191, but it sounds like your needs are a bit more advanced. I can however fix sorting enabling per column now, as this is a quick fix.

I'll be working with integration of the table in Dashboard for the next couple of days, and will be making some modifications to the StudioTable components along the way. I suggest that we look at this issue afterwards, so that we don't get any troublesome merge conflicts 😊

[mgunnerud]

@ErlingHauan great! I did a quick prototype of this where I added the changes to the StudioTable component and the implementation in resource admin. In short, expanding the Columns object to:

type Columns = {
  accessor: string;
  value: React.ReactNode;
  sortable?: boolean;
  headerClassName?: string;
  className?: string;
  renderCell?: (value: Value, rowId: string | number) => React.ReactNode;
}[];

• sortable will determine whether the column is sortable
• headerClassName css class(es) will be added to the <Table.HeaderCell> element for the column
• className (perhaps cellClassName?) css class(es) will be added to the <Table.Cell> elements for this column
• renderCell if defined, will return other markup when rendering this cell, instead of the default row[accessor] value. The first argument is the value of row[accessor], and the second argument is the id of the row. Not sure yet if the second argument should be the row itself, or if we need it at all (in resource admin we can work around this)