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

from datahub.

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

from datahub.