Quite-simple-reactdatatable NPM

Simple-ReactDataTable

Description

Simple React DataTable is a lightweight and flexible React component for displaying data in a tabular format. It offers pagination, search, and columnar sorting features, making the management of large data sets more accessible and intuitive.

Features

Pagination: Easily navigate through paginated data.
Search: Quickly search for specific data, including within a particular column.
Columnar Sorting: Sort data in a column in ascending or descending order.

Installation

To install the package, run the following command in your React project:

npm install simple-reactdatatable

Usage

How to use the ReactDataTable component in your application?

==> Importing:

import {ReactDataTable} from 'simple-reactdatatable';

==> Usage Example:

function MyComponent() {
    const data = [...]; // Your data array
    const columns = [...]; // Columns to display

    return <ReactDataTable data={data} columns={columns} />;
}

==> Props:

data (Array): Data to display in a table format. Must be an array of objects.
columns (Array): Table columns. Each object should contain a key and a title.
onRowClick (Function): Function called when a row is clicked. Receives the data object of the row.
defaultEntriesPerPage (Number): Number of entries to show per page. Default is 10.
sortColumnParam (String): Initial column key for sorting. Default is 'name'.
headerHeight, tableBodyHeight, paginationHeight (String): Custom height for different parts of the table. Default is 'auto'.
headerFontSize, tableBodyFontSize, paginationFontSize (String): Font size for the header, body, and pagination. Default is '1rem'.
fontFamily (String): Font family for the table text. Default is 'Arial'.
containerWidth (String): Width of the table container. Default is '100%'.