React Any Table

Customizable Table component for React!

Takes in an array of objects (each object equal in length) and converts it to a table with the option of pagination.

Install

npm i -s react-any-table

Usage

Being customizable, the table will accept a number of props to change the look and function of your table

| Prop | Type | Description | Default | | ---- | ---- | -----------------------------| --------| | data | array of objects | (Required) Array of objects with each object being of equal length and depth. Every object must also have the same keys which will act as headers for the table. | headerColor | string (color) | The color of the header for the table | white | headerBorderColor | string (color) | border color of the header of the table | #454545 | headerBorderWidth | number | border width of the table header | 1px | headerTextColor | string (color) | text color for the header | #454545 | headerFontSize | number | font size of the text in the header | 12px | rowColor | string (color) | background color of the table's rows | white | rowBorderColor | string (color) | border color of the table's rows | #D9D9D9 | rowBorderWidth | number | border width of the table's rows | 1px | rowTextColor | string (color) | text color of the table's row items| #454545 | rowFontSize | number | font size of each item in the table's rows | 12px | maxViewableWidth | number | maximum number of pixels for the viewable width of the table (overflow will be scrollable) | 700px | maxViewableHeight | number | maximum number of pixels for the viewable height of the table (overflow will be scrollable) | 530px | maxRows | number | maximum number of rows available in each page of the table (if default, then pagination will not be displayed and table's data will be scrollable) | 0 | activePageColor | string (color) | (for pagination) text color of the active page in the table | #454545 | inactivePageColor | string (color) | (for pagination) text color of the inactive page in the table | #D9D9D9 | arrowLeftColor | string (color) | (for pagination) color of the left arrow (if not disabled) in the pagination row | #1890FF | arrowRightColor | string (color) | (for pagination) color of the right arrow (if not disabled) in the pagination row | #1890FF

Example

import React from 'react'
import Table from './Table'

const App = () => {
  return (
		<div style={{paddingTop: 20, paddingLeft: 20}}>
      <Table
       data={[
          {
            id: 1,
            item: 'eggs',
            price: "$2.99",
            available: 'yes'
          },
          {
            id: 2,
            item: 'milk',
            price: "$1.99",
            available: 'yes'
          },
          {
            id: 3,
            item: 'bread',
            price: "$3.99",
            available: 'no'
          },
          {
            id: 4,
            item: 'cheese',
            price: "$2.99",
            available: 'yes'
          },
          {
            id: 5,
            item: 'chicken',
            price: "$6.99",
            available: 'no'
          },
          {
            id: 6,
            item: 'eggs',
            price: "$2.99",
            available: 'yes'
          },
          {
            id: 7,
            item: 'milk',
            price: "$1.99",
            available: 'yes'
          },
          {
            id: 8,
            item: 'bread',
            price: "$3.99",
            available: 'no'
          },
          {
            id: 9,
            item: 'cheese',
            price: "$2.99",
            available: 'yes'
          },
          {
            id: 10,
            item: 'chicken',
            price: "$6.99",
            available: 'no'
          },
          {
            id: 11,
            item: 'eggs',
            price: "$2.99",
            available: 'yes'
          },
          {
            id: 12,
            item: 'milk',
            price: "$1.99",
            available: 'yes'
          },
          {
            id: 14,
            item: 'bread',
            price: "$3.99",
            available: 'no'
          },
          {
            id: 15,
            item: 'cheese',
            price: "$2.99",
            available: 'yes'
          },
          {
            id: 16,
            item: 'chicken',
            price: "$6.99",
            available: 'no'
          },
          {
            id: 17,
            item: 'eggs',
            price: "$2.99",
            available: 'yes'
          },
          {
            id: 18,
            item: 'milk',
            price: "$1.99",
            available: 'yes'
          },
          {
            id: 19,
            item: 'bread',
            price: "$3.99",
            available: 'no'
          },
          {
            id: 20,
            item: 'cheese',
            price: "$2.99",
            available: 'yes'
          },
          {
            id: 21,
            item: 'chicken',
            price: "$6.99",
            available: 'no'
          }          
        ]}
      />
		</div>  );
}

export default App;