react-npm-table-data-set

react-npm-table-data-set

A React component to display data in a table format, using a bootstrap 3 style.

Overview

A react component to display data in a table format, using a bootstrap 3 style.(Wrapper component for: https://react-bootstrap.github.io/components.html#tables)

let data = {
  rows: [
    ['foo', 'bar', 'baz'],
    ['a', 'b', 'c']
  ]
};
<TableDataSet params={data} />;

Params in more detail:

This is a full params object in all it's glory. See details about each key below.

{
  "header": "This is a table of people and their ages",
  "columns": {
    "titles": [
      {
        "name": "First Name",
        "sortable": true
      },
      {
        "name": "Last Name",
        "sortable": false
      },
      {
        "name": "Age",
        "sortable": true
      }
    ],
    "components": [
      {},
      {},
      {
        "name": "NumericLabel",
        "params": {
          "justification": "R"
        }
      }
    ]
  },
  "rows": [
    [
      "Cam",
      "Stuart",
      43
    ],
    [
      "Deepak",
      "Khandelwal",
      28
    ]
  ],
  "styling": {
    "bs3": [
      "responsive",
      "striped",
      "condensed",
      "hover",
      "bordered"
    ],
    "common": {
      "fontFamilyCss": "'Consolas', 'Courier', monospace;",
      "fontSizeCss": "100%",
      "textTransformCss": "uppercase;"
    },
    "header": {
      "fontSizeCss": "150%",
      "backgroundCss": "#0093D0"
    },
    "titles": {
      "fontSizeCss": "120%",
      "backgroundCss": "#999999"
    }
  },
  "pagination": {}
}

caption

An optional table caption that is a full width cell containing a heading of the table. If this key is not present, then no heading is displayed

columns

This part of the params object defines the behavior of the columns

titles

An optional array of column titles, displayed as <th> elements. If this key is not present then there are no titles

components

An optional array of objects specifying react component names and parameters to be used when rendering the cell. Passing null, undefined or {} (empty object) means no component will be used, and the cell will display it's data as is

currently this package support following component

• NumericLabel
• ResultStatusLabel

rows

A required array of rows, containing an array of rows

styling

This part of the params object defines the styling of the table

bs3

See also: https://react-bootstrap.github.io/components.html#tables

An array bootstrap 3 style and behaviour to be passed into the react-bootstrap table. EG:

"bs3": [
      "condensed",
      "hover",
      "bordered"
    ]

Would result in:

<Table condensed hover bordered>...</Table>

common

An optional object of common css styling to be applied across the entire table. The example above are the default values to be used

fontFamilyCss

The font type / family

textTransformCss

Any css text transformations

fontSizeCss

Font css values such as percentage, pixels, ect.

header

Styling for the header

titles

Styling for the title

pagination

An optional object specifying pagination behavior.

Features

• Display table in bootstrap style.
• Display table with sorting functionality.
• Display rows with html tag.
• Display columns according to component passed through params.
• Display table with custom style
• Display table with pagination
• Runs in the browser and Node.js.
• Built on standards.

Example

import React,{Component} from 'react';
import ReactDOM from 'react-dom';
import TableDataSet from 'react-npm-table-data-set'

class App extends Component {
	constructor(props){
		super(props);
	}

	render() {
    let data = {
      "header": "This is a table of people and their ages",
      "columns": {
        "titles": [
          {
            "name": "First Name",
            "sortable": true
          },
          {
            "name": "Last Name",
            "sortable": false
          },
          {
            "name": "Age",
            "sortable": true
          },
          {
            "name": "Status",
            "sortable": false
          },
        ],
        "components": [
          {},
          {},
          {
            "name": "NumericLabel",
            "params": {
              "justification": "R"
            }
          },
          {
            "name": "ResultStatusLabel",
            "params": {
              'bgColorMap' : {
                'pass' : '#3cb521',
                'ok' : '#3cb521',
                'fail' : '#474949',
                'alert' : '#d47500',
                'inc' : '#3cb521',
                'flag' : '#474949',
                'label' : '#ffffff'
              },
              'textColorMap' : {
                'pass' : '#ffffff',
                'ok' : '#ffffff',
                'fail' : '#ffffff',
                'alert' : '#ffffff',
                'inc' : '#cd0200',
                'flag' : '#ffffff',
                'label' : '#ffffff'
              },
            }
          }
        ]
      },
      "rows": [
        ['Cam', 'Stuart', 43,'ok'],
        ['Deepak', 'Khandelwal', 25,'ok'],
        ['Shweta', 'Fatnani', 27,'ok'],
        ['Raunak', 'Singh', 20,'ok'],
        ['Shifali', 'Baghel', 19,'fail'],
        ['Santosh', 'Saini', 26,'ok'],
        ['Vivek', 'Kumar', 26,'ok'],
        ['Raunak', 'Kumar', 20,'ok'],
        ['Shahil', 'Jindal', 26,'ok'],
        ['Rajat', 'Maggo', 24,'ok'],
        ['Shobhana', 'Singh', 23,'ok'],
        ['Sunil', 'Thakur', 29,'ok'],
        ['Yogesh', 'Saini', 34,'fail'],
        ['Rajat', 'Chhug', 40,'pass'],
        ['Pradeep', 'Bhatia', 50,'ok']
      ],
      "styling": {
        "bs3": [
          "responsive",
          "striped",
          "condensed",
          "hover",
          "bordered"
        ],
        "common": {
          "fontFamilyCss": "'Consolas', 'Courier', monospace",
          "fontSizeCss": "100%",
          //"textTransformCss": "uppercase"
        },
        "header": {
          "fontSizeCss": "100%",
          "backgroundCss": "#0093D0",
          "heightCss": "30px",
          "paddingCss": "5px",
          "colorCss" : "#fff"
        },
        "titles": {
          "fontSizeCss": "120%",
          "backgroundCss": "#999999"
        }
      },
      "pagination": {
        "itemPerPage" : 10,
      },
      "search":true
    };
		return(
			<div>
      <TableDataSet params={data} />
			</div>
		);
	}
}

ReactDOM.render(<App />,document.querySelector('.container'));

Technology Stack:

• react
• mocha

Usage:

Clone the repo as a new project:

git clone https://github.com/lobdev/react-npm-table-data-set <table-data-set>

Start Server:

First you have to replace the lib/component/table-data-set.js to server.js in package.json
cd table-data-set
npm i
npm start

Run App:

npm start command automatically initiate browser at 3000 port
http:://localhost:3000

Run tests:

cd table-data-set
npm i
npm test

Developer Notes:

Make sure you configure your editor/IDE to use:

.editorconfig
.eslintrc