cheminfo / cheminfo/nmrium

Redo the design of column configuration tables

Open
#3,282 0 comments 0 reactions 1 assignee Claimed by @wadjih-bencheikh18 View on GitHub
Dominant language
TypeScript
Stars
80
Forks
34
Avg merge
2d 9h
Merged PRs (30d)
36

Description

The objective is to do a new presentational component which improves the design and functionalities of the existing configuration table.

The project has several of those tables scattered in different parts of the interface, but the first goal is to improve on of them: the one in the general settings "Title block" (see screenshot below)

![Image](https://github.com/user-attachments/assets/c9743707-5320-47b2-be57-11962687351a)

- Do not show an index (1, 2, 3 etc...) column
- Add possibility to reorder rows with drag and drop
- Check if a library already exists in the project to do this. If adding a library is required, consult with us first. The way it works can be inspired from github project tables.
- Remove the "action" column which contain the "plus" and "trash" icons.
- The plus action is replaced by adding a field, then reordering the rows.
- The trash icon only appears when hovering a row, and does not appear as part of a separate column. Similar to how an overlay appears in github project tables, see video below.
- The add field action is more tightly integrated to the table, at the place where the new field is going to be added (also similar to github project table video below)

This should be all done using a new presentational component that does not do any action on the application's state. For example, re-ordering the columns or editing a cell should call a callback which then dispatches the action outside of this component.

Don't hesitate to ask if there are questions regarding the API design of this component along the way.

https://github.com/user-attachments/assets/01b7fd3b-746a-4230-ad13-ee061191ca7d

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.