Makes the DataTable responsive

joshwingreene commented 1 year ago

Changes

The DataTable will now hide specific columns based on the current breakpoint. A useViewport hook and relevant models were added in order to support this functionality. Developers must set the initial column visibility state in the table data hooks, ex. useUserTableData.tsx. A vertical ellipsis dropdown button has been added to the right of the headers of the DataTable. When the "Edit Columns" option is clicked, a modal will appear that allows the user to change which columns should be shown or be hidden based on the current breakpoint.
Adds an initialColumnBreakpointVisibility prop to the DataTable in order to support the above functionality
Adds a CustomToggle component, which is used for the aforementioned vertical ellipsis dropdown button.
Adds an OverrideTableStyling styled component in order to ensure that the background of the Edit Columns' dropdown menu doesn't have a transparent background.
Adds a TableModalStyling styled component for theming purposes
Makes the table actions appear via a dropdown menu instead of that animation that was used in the past

Purpose

Makes the DataTable responsive

Learning

I used the following article in order to construct the useViewport hook: Developing responsive layouts with React Hooks

Note

I originally made use of the ViewportProvider that was described in the article. However, since this is the only time where we are using JS for responsiveness purposes, I thought it made more sense to just use the hook and keep it within the DataTable folder. If we need to expand the usage of the useViewport hook, that's when we can make use of the ViewportProvider.

Testing Steps

Pull in the changes to your local copy of this branch and run it alongside the dj_starter_demo repo.
Try changing the column visibility states using the "Edit Columns" option and then see how the DataTable responds when you manipulate the width of the browser

Demo

https://user-images.githubusercontent.com/2876874/211926026-cd325301-2963-4a7c-aeb8-0f3e2f0c6e46.mov

joshwingreene commented 1 year ago

Add responsiveness to Tables

DropsOfSerenity commented 1 year ago

@joshwingreene I'm working on giving this a larger review, it's a bigger PR so it'll take me a bit, I'll let you know when I've got this reviewed for you.