React-data-list-table-component NPM

React Data Table Component

A React table component with search, pagination and select entries

Installation

The package can be installed via npm:

npm install react-data-list-table-component

Or via yarn:

yarn add react-data-list-table-component

How to use

import React from "react";
import { Table } from "react-data-list-table-component";

const render = () => {
  const data = [
    {
      firstName: "Tony",
      lastName: "Stark",
      dateOfBirth: "05/29/1970",
      city: "New York",
      countries: "United States of America",
    },
    {
      firstName: "Steve",
      lastName: "Rogers",
      dateOfBirth: "07/04/1920",
      city: "New York",
      countries: "United States of America",
    },
    {
      firstName: "Robert Bruce",
      lastName: "Banner",
      dateOfBirth: "12/18/1969",
      city: "New York",
      countries: "United States of America",
    },
  ];

  const title = Object.keys(data[0]);

  return (
    <Table
      dataTable={data}
      dataTitle={title}
      tableTitle={"table-caption"}
      rowsPerTable={10}
      range={3}
      selectEntries
      backgroundThemePrimary={"#2b2b2b"}
      contentThemePrimary={"#d4d4d4"}
      backgroundThemeSecondary={"#d4d4d4"}
      contentThemeSecondary={"#2b2b2b"}
    />
  );
};

export default render;

Component props

dataTable : Array of Object
This prop is used for all data of the table
dataTitle : Array of String
This prop is used for the key and the the header of the table ( !Warning : the key must be the same of the key of the data defined in dataTable )
tableTitle : String
This prop is used for define the title of the table (is not required)
rowsPerTable: Number
This prop is used to define the rows for each page of the pagination
backgroundThemePrimary: String
This prop is used to define the primary background of the table
contentThemePrimary: String
This prop is used to define the primary content of the table
backgroundThemeSecondary: String
This prop is used to define the secondary background of the table
contentThemeSecondary: String
This prop is used to define the secondary content of the table
range: Number
This prop is used to define the number of each sibling pagination we can see
selectEntries : Boolean
This prop is used to declare if we want to add a select list for the entries of each pagination