Update Design for Tree Table Completed

[tomaseuu]

Developer: Thomas Le

Closes #15

Pull Request Summary

This pull request is to update the design to match the Figma layout. For now, I’ve just implemented the table section and left out the popup on the right side of the page. I tried to stick as closely as possible to the design, making a few small adjustments to keep it simple and looking good.

Modifications

treeTable\page.tsx

• Implemented the table layout and pagination based on the Figma design.
• Added navbar and functionality for linking "Tree Inventory" selection.

treeTable\treetable.css

• Styled the table, buttons, and page controls for a clean and simple look.
• Applied custom styles for buttons and table header.

Testing Considerations

I have only tested it with the original navbar, the one with just the word "Navbar". I would recommend testing it with the current Navbar.

Pull Request Checklist

• Code is neat, readable, and works
• Comments are appropriate
• The commit messages follows our guidelines
• The developer name is specified
• The summary is completed
• Assign reviewers

Screenshots/Screencast

[kaseyliu]

This looks great! Could you add functionality for these buttons as well? You can make it so that the numbers navigate to the correct section in the data, and you can add a bit more dummy data if needed. It would also be great if when the user is on the first page, the "Previous" button is not clickable, and when they are on the last page, the "Next" button is not clickable. Let me know if you have any questions or need help!

[elhagen13]

Looks good! Thanks for getting it in before midpoint demos!