With react-bootstrap-table-2, we can create expandable rows with the built in BoostrapTable component.

To use it, we install it by running:

npm install react-bootstrap-table-next --save

Then we write:

import React from "react";
import BootstrapTable from "react-bootstrap-table-next";
import "react-bootstrap-table-next/dist/react-bootstrap-table2.min.css";

const expandRow = {
  renderer: row => <div>age: {row.age}</div>
};

const columns = [
  {
    dataField: "id",
    text: "ID"
  },
  {
    dataField: "firstName",
    text: "first name"
  },
  {
    dataField: "lastName",
    text: "last name"
  }
];

const persons = [
  { id: 1, firstName: "james", lastName: "smith", age: 20 },
  { id: 2, firstName: "alex", lastName: "green", age: 20 },
  { id: 3, firstName: "may", lastName: "jones", age: 18 }
];

export default function App() {
  return (
    <div className="App">
      <BootstrapTable
        keyField="id"
        data={persons}
        columns={columns}
        expandRow={expandRow}
      />
    </div>
  );
}

We import the BootstrapTable component and the css that comes with react-bootstrap-table-2.

Then we create an object called expandRow that displays something in the expanded row.

row has the data for an entry, so we just access the property in the component we return.

columns has the columns data. dataField is for the key for the field of the entry.

text is the column heading text that’s corresponds to the key name.

persons has the data we want to display.

In App, we use the BootstrapTable component by passing in the objects that we created before.

expandRow has the object that’s used to display them items when the row is expanded.

data has the data. keyField has the property name for the unique key.

columns has the data for the columns.

Once we wrote the code above, we see the age field when we click on a row.

With react-bootstrap-table-2, we can make tables with expandable rows without much hassle.

We can create tables with React Bootstrap easily.

First, we install React Bootstrap by running:

npm install react-bootstrap bootstrap

Then we can use the built-in Table component as follows:

import React from "react";
import { Table } from "react-bootstrap";
import 'bootstrap/dist/css/bootstrap.min.css';

export default function App() {
  return (
    <div className="App">
      <Table striped bordered hover>
        <thead>
          <tr>
            <th>#</th>
            <th>First Name</th>
            <th>Last Name</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>1</td>
            <td>james</td>
            <td>smith</td>
          </tr>
          <tr>
            <td>2</td>
            <td>jacob</td>
            <td>jones</td>
          </tr>
          <tr>
            <td>3</td>
            <td colSpan="2">larry</td>
          </tr>
        </tbody>
      </Table>
    </div>
  );
}

striped bordered hover means that we have a striped table with borders on each cell.

We also need the Bootstrap CSS to style the components.

We can also add variant="dark" as a prop of Table to turn on dark mode.

Also, we can add the responsive prop to Table to make it responsive.

We can make a table easily with React Bootstrap.

We can format numbers easily with the react-number-format library.

Getting Started

To use it, first we install it by running:

npm install react-number-format --save

Then we can use it by writing the following code:

import React from "react";
import NumberFormat from "react-number-format";

export default function App() {
  return (
    <div className="App">
      <NumberFormat
        value={474849}
        displayType={"text"}
        thousandSeparator={true}
        prefix={"$"}
      />
    </div>
  );
}

We import the NumberFormat component from the react-number-format package.

The value is the number we want to format.

displayType is how we want to display our number. Setting it to 'text' means that we display it as text rather than an input box.

thousandSeparator indicates whether we want to add thousands separator to our formatted number.

prefix is the prefix that we want to put in our number.

Custom Rendering

We can add the renderText prop to with a function that renders a component to render the component our way.

For instance, we can write:

import React from "react";
import NumberFormat from "react-number-format";

export default function App() {
  return (
    <div className="App">
      <NumberFormat
        value={2456981}
        displayType={"text"}
        thousandSeparator={true}
        prefix={"$"}
        renderText={value => <div>{value}</div>}
      />
    </div>
  );
}

We have value => <div>{value}</div> as the value of renderText to render our number in a div.

Grouping Thousands

We can group our thousands in a ways that’s different from the English format.

For example, we can write:

import React from "react";
import NumberFormat from "react-number-format";

export default function App() {
  return (
    <div className="App">
      <NumberFormat
        value={2456981}
        thousandSeparator={true}
        thousandsGroupStyle="lakh"
        prefix={"₹"}
      />
    </div>
  );
}

Then we display the number Indian style.

Changing the Format

We can also change the format of the number.

For example, we can write:

import React from "react";
import NumberFormat from "react-number-format";

export default function App() {
  return (
    <div className="App">
      <NumberFormat value={1111222233334444} format="#### #### #### ####" />
    </div>
  );
}

Then the number is displayed in credit card format.

Input Mask

We can add an input mask by using the mask attribute.

For instance, we can write:

import React from "react";
import NumberFormat from "react-number-format";

export default function App() {
  return (
    <div className="App">
      <NumberFormat
        mask="_"
        value={1111222233334444}
        format="#### #### #### ####"
      />
    </div>
  );
}

Then if we erase it and enter something, underscores will be displayed for digits that haven’t been entered yet.

Conclusion

The NumberFormat component that comes with react-number-format can be great for formatting numbers.

We can display formatted numbers as text or an input box.