Using tables in React: Part 1-JS Tutorial-php.cn

One of the most common user interface elements used to present data is a table. It turns out that there are many aspects that need to be controlled when using tables, such as:

Define columns and headers
Various cell formats (text, numbers, checkboxes)
adjust size
filter
Dynamic Growth
style

In this two-part series, you'll learn the ins and outs of working with tabular data in React using the React Bootstrap Table component. You'll be able to create complex, professional-looking forms with ease, with the ability to customize every aspect.

start using

First, you should familiarize yourself with React itself. If you need a primer on React, Envato Tuts has a great series to help you get started with React. In this tutorial, we will focus on using React Bootstrap Table2.

First, create a React application using the create-react-app command. You can learn how to set up create-react-app in the React Beginners Crash Course.

create-react-app react-table-app

Copy after login

Now navigate to the project folder and install React Bootstrap Table 2 and Bootstrap.

cd react-table-app
npm install react-bootstrap-table-next --save
npm install --save bootstrap@4.0.0

Copy after login

Create basic table

We will start with a basic form. We start by importing the BootstrapTable component and CSS as shown below.

import logo from './logo.svg';
import './App.css';
import React, { Component } from 'react';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css'; 
import BootstrapTable from 'react-bootstrap-table-next';

Copy after login

First, we initialize the data and column variables, and then assign the data to the BootstrapTable component. The data contains the names of some characters from the comedy show Arrested Development.

const data = [
  {id: 1, name: 'Gob', value: '2'},
  {id: 2, name: 'Buster', value: '5'},
  {id: 3, name: 'George Michael', value: '4'}
];
const columns = [{
  dataField: 'id',
  text: 'Product ID'
}, {
  dataField: 'name',
  text: 'Product Name'
}, {
  dataField: 'value',
  text: 'Product value'
}];

Copy after login

Bootstrap components take the following properties.

keyField
data
List

render() The method renders a table with three columns: "ID", "Name", and "Value".

class App extends Component {
  render() {
    return (
      <div className="App">
        <p className="Table-header">Basic Table</p>
        
        <BootstrapTable keyField='id' data={ person } columns={ columns } />
      </div>
    );
  }
}

Copy after login

To view the table, issue the command npm start --reload. The configuration created by create-react-app watches your code and recompiles when you change anything, so you only have to run it once. Then, every change is reflected automatically.

Compiled successfully!

You can now view my-table-app in the browser.

  Local:            https://localhost:3002
  On Your Network:  http://192.168.43.206:3002

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

Copy after login

The results are as follows:

Using tables in React: Part 1

Please note that each column has the same width.

Use columns

You can control many aspects of columns. In particular, column widths can be specified in absolute units, percentages, or not. The column width of unspecified columns is the remainder after equal division. For example, for our base table, we specify the columns as follows:

First column: 20%
Second column: 60%
Third column: 20%

You can also manage text and column alignment and header and column styles. Here are examples of how to specify different column widths, text alignment, and custom styles:

const columns = [{
  dataField: 'id',
  text: 'Product ID',
  headerStyle: (colum, colIndex) => {
          return { width: '20%', textAlign: 'center' };
        }
}, {
  dataField: 'name',
  text: 'Product Name',
  sort: true,
  headerStyle: (colum, colIndex) => {
          return { width: '60%', textAlign: 'center' };
        }
}, {
  dataField: 'value',
  text: 'Product value',
  headerStyle: (colum, colIndex) => {
          return { width: '20%', textAlign: 'center' };
        }
  
}];

Copy after login

The table now looks like this:

Using tables in React: Part 1

Design your form

You've seen how to style individual columns and headers, but styling can go much further. React Bootstrap Table 2 offers many customization options. First, you just add the striped and hover properties to the BootstrapTable component to get an alternate background color for each row.

Let's apply the striped and hover properties to our table.

class App extends Component {
  render() {
    return (
      <div className="App">
        <p className="Table-header">Basic Table</p>
        
        <BootstrapTable 
        striped
        hover
        keyField='id' 
        keyField='id'
        data={ person }
        columns={ columns } 
        />
      </div>
    );
  }
}

Copy after login

Using tables in React: Part 1

See how to style different columns with different colors.

const columns = [{
  dataField: 'id',
  text: 'Product ID',
  style: { backgroundColor: #00afb9 }
}, {
  dataField: 'name',
  text: 'Product Name',
  style: { backgroundColor: #fdfcdc }
}, {
  dataField: 'value',
  text: 'Product value',
  style: { backgroundColor: #fed9b7 }
}];

Copy after login

Using tables in React: Part 1

Table sorting

React Bootstrap Table 2 allows sorting of columns. This is done by providing the sort: true attribute in the columns definition.

const columns = [{
  dataField: 'id',
  text: 'Product ID',
  style: { backgroundColor: #00afb9 }
}, {
  dataField: 'name',
  text: 'Product Name',
  style: { backgroundColor: #fdfcdc },
  sort: true
}, {
  dataField: 'value',
  text: 'Product value',
      style: { backgroundColor: #fed9b7 }
}];

Copy after login

Select row

After you put the data into the table, you may need to select certain rows to perform certain operations on them. React Bootstrap Table 2 provides various selection options. All options are organized in an object that you pass to the component as the selectRow property. Here are some selection options:

Radio mode (radio button)
Multiple selection mode (checkbox)
Configurable column selection width
Select on row click: By default you have to click the selector (radio button or checkbox)
Hide select columns (useful if select on row click is true)
Change selected background color
Initially selected rows
Selection hook (on a single row or when selecting all rows).

The following components demonstrate many of these options:

Using tables in React: Part 1

Other libraries for data tables in React

Let’s explore some other open source React table libraries.

React Virtualization

react-virtualized is great for efficiently displaying large amounts of data when rendering large lists and tabular data.

react-virtualized uses a technology called virtual rendering to efficiently display large amounts of data. Virtual rendering only renders what is visible. For example, if you have a large list with a thousand items, react-virtualized will only display a small portion of the data (data that fits the screen) at any given moment until the user scrolls to display more data. Other features include:

Supports rendering of grids, lists, tables, masonry and collections
Ability to automatically adjust component size
Ability to display items in reverse order
Ability to customize CSS classes and styles

Reaction table

react-table is a lightweight open source library that allows fast and scalable data grids for React. It also supports hooks. Some of its best features include:

Highly customizable
Supports sorting, filters, row selection, column sorting and row expansion
Fully controllable API
Animable and virtual
Resizable

React Data Grid

React Data Grid is another open source library that uses Bootstrap and is great for editing tables. It also has an amazing user interface. Features include:

Column sorting, searching, filtering and grouping
Ability to edit columns
Expand columns to show more data

in conclusion

In this tutorial, we created a simple React app using create-react-app, added react-bootstrap-table2, filled the table with data, processed the columns, styled the table and selected rows.

In the next part, we will continue this journey with extending rows, adding rows, deleting rows, as well as paging, cell editing and advanced customization. stay tuned.

The above is the detailed content of Using tables in React: Part 1. For more information, please follow other related articles on the PHP Chinese website!