Skip to content

[TASK] Update Grid Block #402

Closed
Closed
@ehynd

Description

@ehynd

Description

Increase functionality of existing grid block in new UI. Would suggest starting with seeing how the grid functions in legacy, we want to replicate some of that and change some of that

Existing

Current grid ability within new UI:

  • Select frame and columns
    Toggle pagination on/off

References

Tasks

The following updates should be added to the grid functionality around styling and events:

Events

  • Click event

Styling

  • Header background color
    Header font color/size
    Cell font color/size
    Color by value (should apply to one cell with ability to checkbox to apply to entire row if desired)
    Add title (Chart title, font size, font color)

Features

  • Toggle row spanning
    Wrap text within cells
    Resize columns (in legacy UI, the user is able to drag the column to resize within the panel. Does not need to be accomplished in the exact same way)
    Resize chart

Activity

ehynd

ehynd commented on Mar 27, 2025

@ehynd
Author
Shubham009-prog

Shubham009-prog commented on Apr 7, 2025

@Shubham009-prog
Contributor

Hi, I was having some clarifications:

  1. How will Resize column will work as I have checked currently there in drag column option in MUI Grid ?
  2. In Toggle Row Spamming there is only one switch button. How will row spanning Work?
  3. What will be in the applied rule in color by value (currently not mentioned anything in UI)?
Shubham009-prog

Shubham009-prog commented on Apr 8, 2025

@Shubham009-prog
Contributor

Hi, As per our discussion yesterday, I will proceed with integrating a data grid in place of the standard table. This change will involve significant modifications to the functionalities I have already implemented.

Additionally, I need to explore column resizing on drag functionality, which may require further adjustments. Considering these updates, I anticipate that the task will take more time to complete.

ehynd

ehynd commented on Apr 8, 2025

@ehynd
Author

All sounds good! Pushing out the timeline makes complete sense given the change in direction.

Just for tracking this is our plan on this one:

  • duplicate existing table
  • create new component for MUI data grid
  • begin implementation of tools / updates in the MUI data grid, leaving existing table component as is
Shubham009-prog

Shubham009-prog commented on Apr 11, 2025

@Shubham009-prog
Contributor

Hi, I have successfully Integrated DataGrid along with pagination and resizing column using drag. Also have reimplemented some of features like header and cell styling along with text wrapping, Its also working fine with new data Grid. Also attached screenshot of the progress below:

Image

Shubham009-prog

Shubham009-prog commented on Apr 17, 2025

@Shubham009-prog
Contributor

Hi @ehynd , I have implemented the color by value feature.

Image

After discussion with sayali, she is saying that this design is not approved yet could you confirm about it?

ehynd

ehynd commented on Apr 18, 2025

@ehynd
Author

Hi @Shubham009-prog that's essentially it! Just left one more comment in the figma and then we should be good to go. it looks great!

Shubham009-prog

Shubham009-prog commented on Apr 22, 2025

@Shubham009-prog
Contributor

Hi, I am currently working on the click event. As discussed yesterday I am doing it in same was as its working on the other charts.

linked a pull request that will close this issue402 task update grid block #966on Apr 23, 2025
Shubham009-prog

Shubham009-prog commented on Apr 23, 2025

@Shubham009-prog
Contributor

Hi, I have raised the PR. Please have a look https://github.com/SEMOSS/semoss-ui/pull/966

ehynd

ehynd commented on May 21, 2025

@ehynd
Author

@Shubham009-prog when you get back, could you please update this branch? pull in dev and resolve any conflicts, want to get it merged next week

ehynd

ehynd commented on May 30, 2025

@ehynd
Author

@Shubham009-prog this one instead please! pull in dev and resolve any conflicts, there's a few things I know have changed in the last month to be integrated here

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Labels

No labels
No labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

    Development

    Participants

    @ehynd@Shubham009-prog

    Issue actions

      [TASK] Update Grid Block · Issue #402 · SEMOSS/semoss-ui