Google+
4elements web design & consultancy

Shineyrock

web design & consultancy
Shineyrock web design & consultancy

Shineyrock

  1. web design and consultancy

blog

  1. Home
  2. blog
  3. read
  4. Working With Tables in React, Part One
  • like 5 06

    Working With Tables in React, Part One

    1. November 2017
    2. Daily
    3. read 702

    Overview

    One of the most common user interface elements for presenting your data is a table. It turns out that there are many aspects to control when working with tables, such as:

    • defining columns and headers
    • various cell formats (text, numbers, check boxes)
    • resizing
    • filtering
    • dynamic growing
    • styling

    In this two-part series, you'll will learn about the ins and outs of working with tabular data in React using the React Bootstrap Table component. You'll be able to create sophisticated and professional looking tables by default with little effort and yet be able to customize every part you want to.

    Create a Vanilla React App

    I assume you are familiar with React itself and will focus on working with React Bootstrap Table. Envato Tuts+ has a great series on React you can read for background.

    In a nutshell, I used react-create-app to create a vanilla React app and then installed the react-bootstrap-table: npm install react-bootstrap-table --save.

    It's important to add the bootstrap CSS to the public/index.html file.

    <!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width,
                  initial-scale=1,
                  shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
    <!-- Latest compiled and minified bootstrap CSS -->
    <link rel="stylesheet"
          href="https://maxcdn.bootstrapcdn.com/bootstrap/latest
                /css/bootstrap.min.css">

    <!-- bootstrap theme (Optional) -->
    <link rel="stylesheet"
          href="https://maxcdn.bootstrapcdn.com/bootstrap/latest
               /css/bootstrap-theme.min.css">
    <title>React App</title>
  </head>
  <body>
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>
    <div id="root"></div>
  </body>
</html>

    WebStorm

    If you use JetBrains' WebStorm and you want to run the tests, add --env=jsdom in your run config.

    Basic Table

    We will start with a basic table. Here is a basic table component. It imports the BoostrapTable and TableHeaderColumn from react-bootstrap-table and also the CSS from the dist directory. 

    The render() method renders a table with three columns: "ID", "Name", and "Value". The actual data in the table comes from the "data" property (this.props.data). The data contains the names of some characters from the hilarious show Arrested Development.

    import React, { Component } from 'react';
import {BootstrapTable,
       TableHeaderColumn} from 'react-bootstrap-table';
import '../css/Table.css';
import '../../node_modules/react-bootstrap-table/css/
        react-bootstrap-table.css'


class Table1 extends Component {
  render() {
    return (
      <div>
        <BootstrapTable data={this.props.data}>
          <TableHeaderColumn isKey dataField='id'>
            ID
          </TableHeaderColumn>
          <TableHeaderColumn dataField='name'>
            Name
          </TableHeaderColumn>
          <TableHeaderColumn dataField='value'>
            Value
          </TableHeaderColumn>
        </BootstrapTable>
      </div>
    );
  }
}

export default Table1;

    I instantiated the BasicTable in the render() method of the standard App.js and passed some hard-coded data:

        import React, { Component } from 'react';
import './App.css';
import Table1 from './components/Table1'

var data = [
  {id: 1, name: 'Gob', value: '2'},
  {id: 2, name: 'Buster', value: '5'},
  {id: 3, name: 'George Michael', value: '4'}
];


class App extends Component {
  render() {
    return (
      <div className="App">
        <p className="Table-header">Basic Table</p>
        <Table1 data={data}/>
      </div>
    );
  }
}

export default App;

    To view the table, type: npm start. The configuration created by create-react-app watches over your code and will recompile whenever you change anything, so you need to run only once and then every change will automatically be reflected.

    Compiled successfully!

You can now view react-table in the browser.

  Local:            http://localhost:3000/
  On Your Network:  http://192.168.1.136:3000/

Note that the development build is not optimized.
To create a production build, use yarn build.

    Here is the result:

    Basic table output with three columns and rows

    Note that each column has exactly the same width.

    Working With Columns

    You can control many aspects of the columns. In particular, the column widths can be specified in absolute units as percentages or left unspecified. The column width of unspecified columns is the remainder divided equally. For example, for a table width of 100 px, one column specified 15 px, a second column specified 25% (25 px), and a third column specified 30% (15 px). 

    Two other columns didn't specify a width. Columns 1, 2 and 3 used 70 px together, which leaves 30 px for columns 4 and 5, which will divide it equally. Column 4 and 5 will each have a width of 15 px. Note that if the table is resized, the numbers will change. Only column 1 will always be 15 px wide. 

    The other columns will be computed based on the table width. You can also manage the alignment of text and columns as well as the style of headers and columns. Here is an example of how to specify different column widths, text alignment, and custom styles:

    import React, {Component} from 'react'
import {BootstrapTable, TableHeaderColumn} from
       'react-bootstrap-table'
import '../css/Table.css'
import '../dist/react-bootstrap-table-all.min.css'


class Table2 extends Component {
  render() {
    return (
      <div>
        <BootstrapTable data={this.props.data}>
          <TableHeaderColumn isKey
                             dataField='id'
                             dataAlign='center'
                             headerAlign="left"
                             width="30"
                             tdStyle={
                                 {backgroundColor: 'green'}}>
            ID
          </TableHeaderColumn>
          <TableHeaderColumn dataField='name'
                             dataAlign='center'
                             headerAlign="center"
                             width="20%"
                             thStyle={
                                 {fontWeight: 'lighter',
                                 color: 'red'}}>
            Name
          </TableHeaderColumn>
          <TableHeaderColumn dataField='value'
                             dataAlign='center'
                             headerAlign="right">
            Value
          </TableHeaderColumn>
        </BootstrapTable>
      </div>
    )
  }
}

export default Table2
    Working with Columns

    Styling Your Table

    You saw how to style individual columns and headers, but styling can go much further. React-bootstrap-table provides a lot of options for customization. First you can simply add the striped and hover attributes to the BootstrapTable component to get alternate background colors on each row: <BootstrapTable data={this.props.data} striped hover>

    To style all rows, use trClassName: <BootstrapTable data={data} trClassName='tr-style'> 

    If you want to get really fancy, the trStyle can a function. Check out the following table component that styles differently rows where the name is "George Michael":

    import React, {Component} from 'react'
import {BootstrapTable, TableHeaderColumn}
        from 'react-bootstrap-table'
import '../css/Table.css'
import '../dist/react-bootstrap-table-all.min.css'


function rowClassNameFormat(row, rowIdx) {
  // row is whole row object
  // rowIdx is index of row
  console.log(row)
  return row['name'] === 'George Michael' ?
    'GeorgeMichael-Row' : 'Other-Row';
}


class Table3 extends Component {
  render() {
    return (
      <div>
        <BootstrapTable data={this.props.data}
                        trClassName={rowClassNameFormat}
        >
          <TableHeaderColumn isKey dataField='id'
          >
            ID
          </TableHeaderColumn>
          <TableHeaderColumn dataField='name'
          >
            Name
          </TableHeaderColumn>
          <TableHeaderColumn dataField='value'
          >
            Value
          </TableHeaderColumn>
        </BootstrapTable>
      </div>
    )
  }
}

export default Table3

    The GeorgeMichael-Row and Other-Row CSS classes are defined in Table.css:

    .Table-header {
    background-color: #ccc;
    color: blue;
    padding: 10px;
    text-align: left;
}


.GeorgeMichael-Row {
    background-color: plum;
}

.Other-Row {
    background-color: greenyellow;
}
    Styling the table

    Selecting Rows

    Once you have your data in a table, you may want to select some rows in order to perform some operations on them. React-bootstrap-table provides a wide variety of selection options. All the options are organized in a single object you pass to the component as the selectRow attribute. Here are some of the selection options:

    • single selection mode (radio button)
    • multi-selection mode (checkbox)
    • configurable column selection width
    • select on row click: by default you must click the selector (radio button or checkbox)
    • hide selection column (useful if select on row click is true)
    • change background color on selection
    • initial selected rows
    • selection hooks (on single row or when all rows are selected).

    The following components demonstrate many of these options:

    import React, {Component} from 'react'
import {BootstrapTable, TableHeaderColumn}
        from 'react-bootstrap-table'
import '../css/Table.css'
import '../dist/react-bootstrap-table-all.min.css'


function onSelectRow(row, isSelected, e) {
  if (isSelected) {
    alert(`You just selected '${row['name']}'`)
  }
}

const selectRowProp = {
  mode: 'checkbox',
  clickToSelect: true,
  unselectable: [2],
  selected: [1],
  onSelect: onSelectRow,
  bgColor: 'gold'
};

class Table4 extends Component {
  render() {
    return (
      <div>
        <BootstrapTable data={this.props.data}
                        selectRow={selectRowProp}
        >
          <TableHeaderColumn isKey dataField='id'
          >
            ID
          </TableHeaderColumn>
          <TableHeaderColumn dataField='name'
          >
            Name
          </TableHeaderColumn>
          <TableHeaderColumn dataField='value'
          >
            Value
          </TableHeaderColumn>
        </BootstrapTable>
      </div>
    )
  }
}

export default Table4
    Selecting Rows

    Conclusion

    In this part, we created a simple React application using react-create-app, added React-Bootstrap-Table, populated a table with data, worked with columns, styled the table, and selected rows. 

    In the next part, we'll continue the journey by expanding rows, adding rows, deleting rows, and covering pagination, cell editing, and advanced customization. Stay tuned.

    Photo

    martijn broeders

    founder/ strategic creative at shineyrock web design & consultancy
    e-mail: .(JavaScript must be enabled to view this email address)
    phone: 434 210 0245
    5
    Add a comment...
    4elements
    Comments

By - category

    By - date

      Copyright © 1999 - 2024 Shineyrock web design and consultancy, All Rights Reserved / Terms of Conditions / Sitemap: XML, HTML, Images, Mobile, News