Comments (2)
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
, anddesc
.
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.
Related Issues (20)
- Decrease navbar x-padding
- Reference Data page contains invalid links resulting in HTTP 404 HOT 2
- Country Reference Data is missing Kosovo HOT 3
- Downloading country-codes results in HTTP 307 - Temporary Redirect HOT 2
- @portaljs/remark-wiki-link doesn't work with the latest next-mdx-remote v 5.0.0. HOT 1
- Table of contents width way too big when items have long titles HOT 1
- JSON versions of resources are returning 500 HOT 1
- Can't download data file from a dataset page HOT 1
- A dataset page doesn't load HOT 1
- Ugly Google Analytics query params in the URL if user site is accessed from the dashboard
- Bring back missing docs HOT 4
- Tutorial on setting up tracking with Google Analytics in my DataHub Cloud site
- Option to configure site's thumbnail
- Hero component (?)
- Improve data story layout to be able to set up image in the header
- Author landing page (with all his datasets / stories)
- My repo is not syncing HOT 2
- Project name field pattern check doesn't work and allows to use any character HOT 1
- Site sync fails if no config.json found... HOT 1
- Sitemap not regenerated HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from datahub.