Table Example

Here we offer a simple example that makes use of the table component offered by the library.

The purpose of this component is to make it easier to create a table using jQuery datatables.

The code in this tutorial can be found here.

Dependencies

Building upon the quickstart demo, we first npm install underscore as it is a dependency for the Table component:

npm install underscore --save

Next we add onto the main.js additional script libraries, namely jquery datatables and patternfly pagination:

//PatternFly JS Dependencies Entry

import 'script-loader!../../node_modules/patternfly/node_modules/jquery/dist/jquery.min';
import '../../node_modules/patternfly/node_modules/bootstrap/dist/js/bootstrap.min';

//Datatables Component (Must occur before patternfly*.js)
import '../../node_modules/patternfly/node_modules/datatables.net/js/jquery.dataTables';

import '../../node_modules/patternfly/dist/js/patternfly.min.js';

//Patternfly Pagination
import '../../node_modules/patternfly/dist/js/patternfly.dataTables.pfPagination.js';

We'll also need a table configuration object, one that contains some column info, mock data, and other miscellaneous info:

tableConfig.js:

export const tableConfig = {
  columns:[
    {data:"id", title:"ID"},
    {data:"fname", title:"First Name"},
    {data:"lname", title:"Last Name"}],
  data: [
    {id: "1", fname: "John", lname: "Smith"},
    {id: "2", fname: "Jacob", lname: "Jones"},
    {id: "3", fname: "David", lname: "Taylor"},
    {id: "4", fname: "Michael", lname: "Johnson"},
    {id: "5", fname: "Richard", lname: "Jackson"},
    {id: "6", fname: "Josh", lname: "Shaw"},
    {id: "7", fname: "Christian", lname: "Lloyd"},
    {id: "8", fname: "Lukas", lname: "Ellis"},
    {id: "9", fname: "Lindsay", lname: "Martin"},
    {id: "10", fname: "Daniel", lname: "Johnston"},
    {id: "12", fname: "Jerry", lname: "Carr"},
    {id: "13", fname: "Ian", lname: "Hamilton"},
    {id: "14", fname: "Warren", lname: "Cox"},
    {id: "15", fname: "Peter", lname: "Foster"},
    {id: "16", fname: "Alex", lname: "Barnes"},
    {id: "17", fname: "Cody", lname: "Gordon"}
  ],
  dom: "t",
  order: [[ 0, 'asc' ]],
  pfConfig: {
    filterCaseInsensitive: true,
    paginationSelector: "#pagination1",
    colvisMenuSelector: '.table-view-pf-colvis-menu'
  },
};

Finally we import the table config and the Table component from the library and place it in our main page render method:

import React, { Component } from "react";
import { tableConfig } from './tableConfig.js';
import Table from '../pf-lib/table/TableView.jsx'
export class main_page extends Component {

  render() {
    return (
      <div className="col col-cards-pf container-cards-pf fader">
        <div className="cards col-xs-10 col-md-8 ">
          <div className="card-pf card-pf-accented">
            <div className="card-pf-heading c">
              <h2 className="card-pf-title">
                Table Example
              </h2>
              <div className="card-pf-footer">
                <Table config={tableConfig}/>
              </div>
            </div>
          </div>
        </div>
      </div>
    )
  }

}


export default main_page

The final display should look like the following complete with a pagination footer (can be modified in the library file TableFooter.jsx for futher customization).