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.

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:

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.

Table of Contents

• Installation
• Usage

## Usage/Examples

The simplest example:

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

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 |