usereactable

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
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