usereactable v0.2.8

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