Tables

Tables - 图1

  1. import React from 'react';
  2. import { Table } from 'reactstrap';
  4. export default class Example extends React.Component {
  5.   render() {
  6.     return (
  7.       <Table>
  8.         <thead>
  9.           <tr>
  10.             <th>#</th>
  11.             <th>First Name</th>
  12.             <th>Last Name</th>
  13.             <th>Username</th>
  14.           </tr>
  15.         </thead>
  16.         <tbody>
  17.           <tr>
  18.             <th scope="row">1</th>
  19.             <td>Mark</td>
  20.             <td>Otto</td>
  21.             <td>@mdo</td>
  22.           </tr>
  23.           <tr>
  24.             <th scope="row">2</th>
  25.             <td>Jacob</td>
  26.             <td>Thornton</td>
  27.             <td>@fat</td>
  28.           </tr>
  29.           <tr>
  30.             <th scope="row">3</th>
  31.             <td>Larry</td>
  32.             <td>the Bird</td>
  33.             <td>@twitter</td>
  34.           </tr>
  35.         </tbody>
  36.       </Table>
  37.     );
  38.   }
  39. }

Properties

  1. Table.propTypes = {
  2. // Pass in a Component to override default element
  3. tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
  4. size: PropTypes.string,
  5. bordered: PropTypes.bool,
  6. borderless: PropTypes.bool,
  7. striped: PropTypes.bool,
  8. dark: PropTypes.bool,
  9. hover: PropTypes.bool,
  10. responsive: PropTypes.bool,
  11. // Custom ref handler that will be assigned to the "ref" of the inner <table> element
  12. innerRef: PropTypes.oneOfType([
  13.   PropTypes.func,
  14.   PropTypes.string,
  15.   PropTypes.object
  16. ])
  17. };

Dark table

Tables - 图2

  1. import React from 'react';
  2. import { Table } from 'reactstrap';
  4. export default class Example extends React.Component {
  5.   render() {
  6.     return (
  7.       <Table dark>
  8.         <thead>
  9.           <tr>
  10.             <th>#</th>
  11.             <th>First Name</th>
  12.             <th>Last Name</th>
  13.             <th>Username</th>
  14.           </tr>
  15.         </thead>
  16.         <tbody>
  17.           <tr>
  18.             <th scope="row">1</th>
  19.             <td>Mark</td>
  20.             <td>Otto</td>
  21.             <td>@mdo</td>
  22.           </tr>
  23.           <tr>
  24.             <th scope="row">2</th>
  25.             <td>Jacob</td>
  26.             <td>Thornton</td>
  27.             <td>@fat</td>
  28.           </tr>
  29.           <tr>
  30.             <th scope="row">3</th>
  31.             <td>Larry</td>
  32.             <td>the Bird</td>
  33.             <td>@twitter</td>
  34.           </tr>
  35.         </tbody>
  36.       </Table>
  37.     );
  38.   }
  39. }

Striped rows

Tables - 图3

  1. import React from 'react';
  2. import { Table } from 'reactstrap';
  4. export default class Example extends React.Component {
  5.   render() {
  6.     return (
  7.       <Table striped>
  8.         <thead>
  9.           <tr>
  10.             <th>#</th>
  11.             <th>First Name</th>
  12.             <th>Last Name</th>
  13.             <th>Username</th>
  14.           </tr>
  15.         </thead>
  16.         <tbody>
  17.           <tr>
  18.             <th scope="row">1</th>
  19.             <td>Mark</td>
  20.             <td>Otto</td>
  21.             <td>@mdo</td>
  22.           </tr>
  23.           <tr>
  24.             <th scope="row">2</th>
  25.             <td>Jacob</td>
  26.             <td>Thornton</td>
  27.             <td>@fat</td>
  28.           </tr>
  29.           <tr>
  30.             <th scope="row">3</th>
  31.             <td>Larry</td>
  32.             <td>the Bird</td>
  33.             <td>@twitter</td>
  34.           </tr>
  35.         </tbody>
  36.       </Table>
  37.     );
  38.   }
  39. }

Bordered table

Tables - 图4

  1. import React from 'react';
  2. import { Table } from 'reactstrap';
  4. export default class Example extends React.Component {
  5.   render() {
  6.     return (
  7.       <Table bordered>
  8.         <thead>
  9.           <tr>
  10.             <th>#</th>
  11.             <th>First Name</th>
  12.             <th>Last Name</th>
  13.             <th>Username</th>
  14.           </tr>
  15.         </thead>
  16.         <tbody>
  17.           <tr>
  18.             <th scope="row">1</th>
  19.             <td>Mark</td>
  20.             <td>Otto</td>
  21.             <td>@mdo</td>
  22.           </tr>
  23.           <tr>
  24.             <th scope="row">2</th>
  25.             <td>Jacob</td>
  26.             <td>Thornton</td>
  27.             <td>@fat</td>
  28.           </tr>
  29.           <tr>
  30.             <th scope="row">3</th>
  31.             <td>Larry</td>
  32.             <td>the Bird</td>
  33.             <td>@twitter</td>
  34.           </tr>
  35.         </tbody>
  36.       </Table>
  37.     );
  38.   }
  39. }

Borderless table

Tables - 图5

  1. import React from 'react';
  2. import { Table } from 'reactstrap';
  4. export default class Example extends React.Component {
  5.   render() {
  6.     return (
  7.       <Table borderless>
  8.         <thead>
  9.           <tr>
  10.             <th>#</th>
  11.             <th>First Name</th>
  12.             <th>Last Name</th>
  13.             <th>Username</th>
  14.           </tr>
  15.         </thead>
  16.         <tbody>
  17.           <tr>
  18.             <th scope="row">1</th>
  19.             <td>Mark</td>
  20.             <td>Otto</td>
  21.             <td>@mdo</td>
  22.           </tr>
  23.           <tr>
  24.             <th scope="row">2</th>
  25.             <td>Jacob</td>
  26.             <td>Thornton</td>
  27.             <td>@fat</td>
  28.           </tr>
  29.           <tr>
  30.             <th scope="row">3</th>
  31.             <td>Larry</td>
  32.             <td>the Bird</td>
  33.             <td>@twitter</td>
  34.           </tr>
  35.         </tbody>
  36.       </Table>
  37.     );
  38.   }
  39. }

Hoverable rows

Tables - 图6

  1. import React from 'react';
  2. import { Table } from 'reactstrap';
  4. export default class Example extends React.Component {
  5.   render() {
  6.     return (
  7.       <Table hover>
  8.         <thead>
  9.           <tr>
  10.             <th>#</th>
  11.             <th>First Name</th>
  12.             <th>Last Name</th>
  13.             <th>Username</th>
  14.           </tr>
  15.         </thead>
  16.         <tbody>
  17.           <tr>
  18.             <th scope="row">1</th>
  19.             <td>Mark</td>
  20.             <td>Otto</td>
  21.             <td>@mdo</td>
  22.           </tr>
  23.           <tr>
  24.             <th scope="row">2</th>
  25.             <td>Jacob</td>
  26.             <td>Thornton</td>
  27.             <td>@fat</td>
  28.           </tr>
  29.           <tr>
  30.             <th scope="row">3</th>
  31.             <td>Larry</td>
  32.             <td>the Bird</td>
  33.             <td>@twitter</td>
  34.           </tr>
  35.         </tbody>
  36.       </Table>
  37.     );
  38.   }
  39. }

Small table

Tables - 图7

  1. import React from 'react';
  2. import { Table } from 'reactstrap';
  4. export default class Example extends React.Component {
  5.   render() {
  6.     return (
  7.       <Table size="sm">
  8.         <thead>
  9.           <tr>
  10.             <th>#</th>
  11.             <th>First Name</th>
  12.             <th>Last Name</th>
  13.             <th>Username</th>
  14.           </tr>
  15.         </thead>
  16.         <tbody>
  17.           <tr>
  18.             <th scope="row">1</th>
  19.             <td>Mark</td>
  20.             <td>Otto</td>
  21.             <td>@mdo</td>
  22.           </tr>
  23.           <tr>
  24.             <th scope="row">2</th>
  25.             <td>Jacob</td>
  26.             <td>Thornton</td>
  27.             <td>@fat</td>
  28.           </tr>
  29.           <tr>
  30.             <th scope="row">3</th>
  31.             <td>Larry</td>
  32.             <td>the Bird</td>
  33.             <td>@twitter</td>
  34.           </tr>
  35.         </tbody>
  36.       </Table>
  37.     );
  38.   }
  39. }

Responsive table

Tables - 图8

  1. import React from 'react';
  2. import { Table } from 'reactstrap';
  4. export default class Example extends React.Component {
  5.   render() {
  6.     return (
  7.       <Table responsive>
  8.         <thead>
  9.           <tr>
  10.             <th>#</th>
  11.             <th>Table heading</th>
  12.             <th>Table heading</th>
  13.             <th>Table heading</th>
  14.             <th>Table heading</th>
  15.             <th>Table heading</th>
  16.             <th>Table heading</th>
  17.           </tr>
  18.         </thead>
  19.         <tbody>
  20.           <tr>
  21.             <th scope="row">1</th>
  22.             <td>Table cell</td>
  23.             <td>Table cell</td>
  24.             <td>Table cell</td>
  25.             <td>Table cell</td>
  26.             <td>Table cell</td>
  27.             <td>Table cell</td>
  28.           </tr>
  29.           <tr>
  30.             <th scope="row">2</th>
  31.             <td>Table cell</td>
  32.             <td>Table cell</td>
  33.             <td>Table cell</td>
  34.             <td>Table cell</td>
  35.             <td>Table cell</td>
  36.             <td>Table cell</td>
  37.           </tr>
  38.           <tr>
  39.             <th scope="row">3</th>
  40.             <td>Table cell</td>
  41.             <td>Table cell</td>
  42.             <td>Table cell</td>
  43.             <td>Table cell</td>
  44.             <td>Table cell</td>
  45.             <td>Table cell</td>
  46.           </tr>
  47.         </tbody>
  48.       </Table>
  49.     );
  50.   }
  51. }