React Data Grid with Custom Views

This is a React project that includes a customizable data grid component with the ability to save and load custom views of the grid's state. It also integrates user authentication and allows users to save their own custom views.

Table of Contents

Installation

Before you start, make sure you have Node.js and npm (or yarn) installed on your system.

  1. Clone this repository to your local machine:

    git clone https://github.com/HamidHabib/polaris-table.git
  2. Navigate to the project directory:

    cd your-project
  3. Install the project dependencies:

    npm install
  4. Start the development server:

    npm start
  5. Open your web browser and visit http://localhost:3000 to see the application in action.

Usage

This project is a React application that provides a customizable data grid. Users can perform the following actions:

  • View a list of records with various columns.
  • Sort, filter, and paginate through the data.
  • Create custom views of the data grid's state.
  • Load and switch between saved custom views.
  • Authenticate and save custom views under their user account.

Features

1. Custom Views

Users can create custom views of the data grid's state, including column configurations, sorting, filtering, and pagination settings. Each view can be assigned a label.

2. View Management

Users can manage their custom views by saving, loading, and deleting them. The number of saved views is displayed in the toolbar.

3. User Authentication

User authentication is integrated into the application, allowing users to associate custom views with their accounts.

4. Responsive Design

The data grid is designed to be responsive and adapts to different screen sizes.

Customization

The project can be customized and extended in various ways:

  • Data Source: Replace the sample data with your own data source.
  • Styling: Customize the styling of the data grid and components to match your application's design.
  • Additional Features: Extend the functionality of the data grid by adding new features or actions.

Feel free to contribute to this project or report any issues you encounter. Thank you for using and exploring this customizable React data grid application!