# UseReactTable

UseReactTable is a React package that provides fast, flexible, and simple data tables for displaying tabular data. It supports features such as sorting, filtering, and pagination and is built on the power of [React.js](https://reactjs.org/).

## Features

- **Single Component Integration:** Easily integrate a feature-rich data table with just one component.
- **Customizable:** Tailor the appearance and behavior of the table to meet your specific requirements.
- **Pagination, Sorting, Search, Filtering:** Efficiently manage and display data with built-in features.
- **Resizable Columns:** Resize columns to optimize the viewing experience.
- **Selection:** Support row selection for actions like deletion or further processing.
- **Responsive Design:** Ensure a seamless experience across different screen sizes.

## Installation

### Using NPM

To use UseReactTable in your React project, install it via npm:

```bash
npm install --save usereactable
```
There might be hidden bugs lurking around any corner. I'll try to
tag any releases with breaking changes.

**Note**: Feel free to submit new issues [here](https://github.com/pankajkhuswaha/react-table/issues).

## Table of Contents

- [Installation](#installation)
- [Usage](#usage)

## ## Usage/Examples
The simplest example:

```jsx
import { useEffect, useState } from "react";
import Datatable from "usereactable";

const App = () => {
  const columns = [
    {
      headerName: "First Name",
      field: "firstName",
    },
    {
      headerName: "Last Name",
      field: "lastName",
    },
    {
      headerName: "Maiden Name",
      field: "maidenName",
    },
    {
      headerName: "Maiden Name",
      field: "image",
    },
    {
      headerName: "Age",
      field: "age",
      style: {
        color: "green",
      },
    },
  ];
  const [data, setdata] = useState([]);
  useEffect(() => {
    fetch("https://dummyjson.com/users?limit=100")
      .then((res) => res.json())
      .then((data) => setdata(data.users.slice(0, 100)));
  }, []);

  return (
    <div>
      <Datatable
        rows={data}
        columns={columns}
        title={"Customer list"}
        actionButtons
        excelDownload
        pagination
      />
    </div>
  );
};

export default App;

```

While pretty basic, this example demonstrates a couple things:

- Import Datatable from usereacttable
- Cols in the column that is gone be shown in react table
- data is rows data which is gone be show in table
- pagination keyword enable pagination to your table 
-React DOM attributes such as className will pass-through to the rendered `<table>`

## Screenshots

![App Screenshot](./screenshot.gif)

## Props

| Name | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| title | string | Yes |null | Heading of the table |
| rows | array | Yes | [] | array of objects |
| columns | array | Yes |null | List of cols which gone be see in the table |
| subTitle | string | Yes | undefined | Sub-Heading of the table |
| style | CSS Styles | No | null | Add styles to table container |
| className | string | No | null | Add className to table container |
| tableheadstyle | CSS Styles | No | undefined | change style of table heading |
| searchAble | boolean | No | true | Show / Hide search box from table |
| tableheadstyle | CSS Styles | No | undefined | change style of table heading |
| tablerowstyle | CSS Styles | No | undefined | change style of table's row |
| pagination | boolean | No | false | Add pagination to table |
| actionButtons | boolean | Object | no |false | Displayed action buttons in the table |
| selection | boolean | No | false | Enables / disable the row selection in table |
| excelDownload | boolean | No | false | Enables / disable the feature of download data in excel file |
| removefromExcel | boolean | No | undefined | Removes the key's from excel file from download |
| onEditBtnClick | function | No | undefined | Function on edit button click |
| onDeleteBtnClick | function | No | undefined | Function on delete button click |
| keysToExcludeFromView | string[] | No | undefined | hide keys from default view model |
| viewButton | React Element | No | undefined | Add custom view button in the table |
| editButton | React Element | No | undefined | Add custom edit button in the table |
| deleteButton | React Element | No | undefined | Add custom delete button in the table |
| modalClassName | string | No | undefined | add classname to modal container |
| modalStyle | React Css Properties | No | undefined | To change modal style |