FlatUiTable component potential improvements

[olayway]

Tasks

• investigate if it's possible to configure column by which data is sorted in our FlatUiTable component
• if not, investigate how can we enable it (note FlatUiTable is a wrapper around https://github.com/githubocto/flat-ui)
• (bonus) see if we can enable other useful options that are not currently supported
• implement

Notes

From César's feedback on using DataHub Cloud:

For example, the FlatUITable component, ideal for tables, is designed to take the first column as the index column, which means the component will sort the data by the first column.

The detail is that sometimes I want to sort the data referencing to another column and not in descending order (numbers) or from A to Z as it is preset.

Faced with this scenario, I found that I had two alternatives: set a first index column in your dataset or put the field I would like to sort the data by in the first column.

[gradedSystem]

Investigation

I have reviewed Cesar's feedback and discovered that the following options are available:

• defaultStickyColumnName can be used to set which column appears on the left for selection.
• For sorting, the only available options are by column_name, asc, and desc.

While FlatUI tables have limited options, a few features might still be useful:

• diffData: A revised version of your primary dataset, formatted as an array of objects where each object is a row in the table. This table will show the "differences" between this dataset and the original dataset:
  • Added lines
  • Removed lines
  • Modified cells
• downloadFileName If lets say author wants the data to be called in the original way.

cc @olayway

[gradedSystem]

Investigation Summary: Configuring Sorting in FlatUITable Component

Overview

The FlatUITable component is a wrapper around the @githubocto/flat-ui library, which provides functionality for displaying and interacting with tabular data. By default, this component sorts data by the first column. This summary outlines the investigation into configuring sorting by other columns and exploring additional features.

Sorting Configuration

Default Sorting Behavior

The FlatUITable component initially sorts data based on the first column of the dataset. This default behavior can be limiting when there is a need to sort data based on different columns or sorting directions.

Configuring Sorting by a Different Column

The @githubocto/flat-ui library provides a defaultSort prop that allows specifying the initial column and order for sorting. This prop can be used to configure sorting when the table is first rendered. The defaultSort prop accepts an array where:

• The first element is the column name by which to sort.
• The second element specifies the sort direction ('asc' for ascending or 'desc' for descending).

Example Configuration:

<Grid
  data={data}
  defaultSort={['age', 'desc']} // Sorts by 'age' column in descending order initially
/>

Example Configuration (all props):

const data = [
    { id: 1, name: 'John Doe', age: 28, occupation: 'Engineer' },
    { id: 2, name: 'Jane Smith', age: 32, occupation: 'Designer' },
    { id: 3, name: 'Mike Johnson', age: 45, occupation: 'Manager' },
  ]
const defaultFilters = {
  age: [10], // Filter rows where age is 10 or more 
  };

const defaultSort = ['name', 'asc'];

<Grid
   data={data}
   defaultFilters={defaultFilters}
   defaultSort={defaultSort}
   defaultStickyColumnName='name' // choose any column that needed to appear first in the table
   canDownload={true}
   downloadFilename='my-data'
   isEditable={true}
    />

Example changes could be applied to the FlatUITable.tsx component:
https://github.com/datopian/datahub/blob/1baebc3f3ca6fd2cba3b6b561b36c0a6a9ee5aff/examples/openspending/components/FlatUiTable.tsx#L63C1-L83C3
In this manner:

export interface FlatUiTableProps {
  url?: string;
  data?: { [key: string]: number | string }[];
  rawCsv?: string;
  range?: string;
  corsProxy?: string;
  defaultFilters?: object;  // Add additional props here
  defaultSort?: [string, 'asc' | 'desc'];  // Example additional prop
  defaultStickyColumnName?: string;  // Example additional prop
  canDownload?: boolean;  // Example additional prop
  downloadFilename?: string;  // Example additional prop
  isEditable?: boolean;  // Example additional prop
  // Add more props as needed
}

cc @olayway