Reactstrap Tables

Bootstrap Tables are designed to be opt-in due to the widespread use of tables across third-party widgets like calendars and date pickers.
Keep reading some Bootstrap Tables examples to see how these tables work.

Examples

#	Name	Job Position	Since	Salary
1	Andrew Mike	Develop	2013	€ 99,225
2	John Doe	Design	2012	€ 89,241
3	Alex Mike	Design	2010	€ 92,144

import React from "react";

// reactstrap components
import { Button, Table } from "reactstrap";

function Example() {
  return (
    <>
      <Table>
        <thead>
          <tr>
            <th className=" text-center">#</th>
            <th>Name</th>
            <th>Job Position</th>
            <th>Since</th>
            <th className=" text-right">Salary</th>
            <th className=" text-right">Actions</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td className=" text-center">1</td>
            <td>Andrew Mike</td>
            <td>Develop</td>
            <td>2013</td>
            <td className=" text-right">€ 99,225</td>
            <td className=" td-actions text-right">
              <Button
                className=" btn-icon"
                color="info"
                size="sm"
                type="button"
              >
                <i className=" ni ni-circle-08 pt-1"></i>
              </Button>

              <Button
                className=" btn-icon"
                color="success"
                size="sm"
                type="button"
              >
                <i className=" ni ni-settings-gear-65 pt-1"></i>
              </Button>

              <Button
                className=" btn-icon"
                color="danger"
                size="sm"
                type="button"
              >
                <i className=" ni ni-fat-remove pt-1"></i>
              </Button>
            </td>
          </tr>
          <tr>
            <td className=" text-center">2</td>
            <td>John Doe</td>
            <td>Design</td>
            <td>2012</td>
            <td className=" text-right">€ 89,241</td>
            <td className=" td-actions text-right">
              <Button
                className=" btn-icon"
                color="info"
                size="sm"
                type="button"
              >
                <i className=" ni ni-circle-08 pt-1"></i>
              </Button>

              <Button
                className=" btn-icon"
                color="success"
                size="sm"
                type="button"
              >
                <i className=" ni ni-settings-gear-65 pt-1"></i>
              </Button>

              <Button
                className=" btn-icon"
                color="danger"
                size="sm"
                type="button"
              >
                <i className=" ni ni-fat-remove pt-1"></i>
              </Button>
            </td>
          </tr>
          <tr>
            <td className=" text-center">3</td>
            <td>Alex Mike</td>
            <td>Design</td>
            <td>2010</td>
            <td className=" text-right">€ 92,144</td>
            <td className=" td-actions text-right">
              <Button
                className=" btn-icon btn-simple"
                color="info"
                size="sm"
                type="button"
              >
                <i className=" ni ni-circle-08 pt-1"></i>
              </Button>

              <Button
                className=" btn-icon btn-simple"
                color="success"
                size="sm"
                type="button"
              >
                <i className=" ni ni-settings-gear-65 pt-1"></i>
              </Button>

              <Button
                className=" btn-icon btn-simple"
                color="danger"
                size="sm"
                type="button"
              >
                <i className=" ni ni-fat-remove pt-1"></i>
              </Button>
            </td>
          </tr>
        </tbody>
      </Table>
    </>
  );
}

export default Example;

Shopping Cart Table

	Product	Color	Size	Price	Qty	Amount
	Spring Jacket by theNorthFace	Red	M	€549	1	€549

import React from "react";

// reactstrap components
import { Button, ButtonGroup, Table } from "reactstrap";

function Example() {
  return (
    <>
      <Table className=" table-shopping" responsive>
        <thead>
          <tr>
            <th className=" text-center"></th>
            <th>Product</th>
            <th className=" th-description">Color</th>
            <th className=" th-description">Size</th>
            <th className=" text-right">Price</th>
            <th className=" text-right">Qty</th>
            <th className=" text-right">Amount</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>
              <div className=" img-container">
                <img
                  alt="..."
                  src="https://demos.creative-tim.com/argon-design-system-pro/assets/img/jacket.png"
                ></img>
              </div>
            </td>
            <td className=" td-name">
              <a href="#pablo" onClick={(e) => e.preventDefault()}>
                Spring Jacket
              </a>
              <br></br>
              <small>by theNorthFace</small>
            </td>
            <td>Red</td>
            <td>M</td>
            <td className=" td-number">
              <small>€</small>
              549
            </td>
            <td className=" td-number">
              1{" "}
              <ButtonGroup>
                <Button color="info" size="sm">
                  <i className=" ni ni-fat-delete"></i>
                </Button>
                <Button color="info" size="sm">
                  <i className=" ni ni-fat-add"></i>
                </Button>
              </ButtonGroup>
            </td>
            <td className=" td-number">
              <small>€</small>
              549
            </td>
            <td className=" td-actions">
              <Button
                className=" btn-icon btn-simple"
                color="info"
                type="button"
              >
                <i className=" ni ni-fat-remove"></i>
              </Button>
            </td>
          </tr>
        </tbody>
      </Table>
    </>
  );
}

export default Example;

More examples

Please check our core tables page.

Props

If you want to see more examples and properties please check the official Reactstrap Documentation.