Overhaul Member Grid

[Leundai]

Description

Currently, we are using AG Grid as a method of displaying member information and it is very straightforward in how it displays it. However, we want to make it more user-friendly and up to date with current h4i UI/UX trends

This is a high impact issue since it will be the first component members will be seeing and it will be used in many ways instead of just member info

Important: This is only focused on the look of the component. Don't worry too much about filters, add members or search members. But still, design this component in a way that those features can easily be implemented (ex. non-functional btns)

Learning objectives

• Craft highly malleable components
• Usage of CSS Grid based features

Todo

These points are a rough guideline. Please feel free to discuss with others on the team about the best way to design this component!

• Refer to the design scroll through and you'll see how buttons work to get a reference (no need to implement btn functionality)
• Explore different libraries that handle data display if AG Grid is not a good tool
• Implement table/grid UI
• Connect to API endpoints that already exist

Useful links

• https://www.ag-grid.com/react-grid/
• https://semantic-ui.com/