Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/himani1001/datatable-using-api

Maintained row selections across pages in DataTable
https://github.com/himani1001/datatable-using-api

api axios primereact react-icons reactjs typescript vite

Last synced: 4 months ago
JSON representation

Maintained row selections across pages in DataTable

Host: GitHub
URL: https://github.com/himani1001/datatable-using-api
Owner: himani1001
Created: 2024-09-15T18:38:17.000Z (5 months ago)
Default Branch: main
Last Pushed: 2024-09-17T12:48:25.000Z (5 months ago)
Last Synced: 2024-10-09T17:02:14.733Z (4 months ago)
Topics: api, axios, primereact, react-icons, reactjs, typescript, vite
Language: TypeScript
Homepage:
Size: 44.9 KB
Stars: 0
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

# DataTable Using API

Welcome to the DataTable Using API web application! This project allows users to view and interact with a collection of artworks fetched from an API, featuring capabilities such as pagination, row selection, and maintaining selections across multiple pages.

## Features

- **Data Table**: Displays a collection of artworks with pagination.
- **Row Selection**: Select multiple rows using checkboxes or input a number to select rows across pages.
- **Selection Persistence**: Maintains row selections as you navigate between pages.
- **Customizable Pagination**: Adjust the number of rows per page and navigate through pages easily.

## Getting Started

To get started with this project, follow the instructions below.

### Prerequisites

- Node.js (v14 or later)
- npm (v6 or later)

### Installation

1. Clone the repository:

```bash
git clone https://github.com/your-username/dataTable-Using-API.git
```

2. Navigate into the project directory:

```bash
cd dataTable-Using-API
```

3. Install the dependencies using `npm`:

```bash
npm install
```

**OR** if you are using `yarn`, run:

```bash
yarn install
```

The application will be available at `http://localhost:3000`.

### Usage

- **Viewing Artworks**: The main page displays a paginated list of artworks.
- **Selecting Rows**: Toggle selection mode and use checkboxes to select rows. Alternatively, input a number to select that many rows across pages.
- **Navigating Pages**: Use pagination controls to navigate through pages and maintain your row selections.

### Technologies Used

- React
- PrimeReact
- Axios
- React Icons

### UI

![image](https://github.com/user-attachments/assets/df8d0a4a-a08e-4209-9468-061a84d45e67)
![image](https://github.com/user-attachments/assets/35018151-e11f-4bb6-9d50-488730c14839)

### Contributing

Contributions are welcome! Please fork the repository, make your changes, and submit a pull request.