table

v1.0.0arrow_drop_down
v1.0.0
STATUS
Passing
DOWNLOADS
124
LICENSE
MIT
VISIBILITY
Public
PUBLISHED
4 months ago
subject
Adds zebra-striping to any table row within the `<tbody>`.
1 contributor
Like
Use table in your project ?
Copied
npm i @bit/react-bootstrap.react-bootstrap.table
Set Bit as a scoped registryLearn more
npm config set '@bit:registry' https://node.bit.dev
Files
src/Table.js
98 Lines(50 sloc)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
import classNames from 'classnames';
import React from 'react';
import PropTypes from 'prop-types';

import { createBootstrapComponent } from './ThemeProvider';

class Table extends React.Component {
  static propTypes = {
    /**
     * @default 'table'
     */
    bsPrefix: PropTypes.string,

    /**
     * Adds zebra-striping to any table row within the `<tbody>`.
     */
    striped: PropTypes.bool,

    /**
     * Adds borders on all sides of the table and cells.
     */
    bordered: PropTypes.bool,

    /**
     * Removes all borders on the table and cells, including table header.
     */
    borderless: PropTypes.bool,

    /**
     * Enable a hover state on table rows within a `<tbody>`.
     */
    hover: PropTypes.bool,

    /**
     * Make tables more compact by cutting cell padding in half by setting
     * size as `sm`.
     */
    size: PropTypes.string,

    /**
     * Invert the colors of the table — with light text on dark backgrounds
     * by setting variant as `dark`.
     */
    variant: PropTypes.string,

    /**
     * Responsive tables allow tables to be scrolled horizontally with ease.
     * Across every breakpoint, use `responsive` for horizontally
     * scrolling tables. Responsive tables are wrapped automatically in a `div`.
     * Use `responsive="sm"`, `responsive="md"`, `responsive="lg"`, or
     * `responsive="xl"` as needed to create responsive tables up to
     * a particular breakpoint. From that breakpoint and up, the table will
     * behave normally and not scroll horizontally.
     */
    responsive: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
  };

  render() {
    const {
      bsPrefix,
      className,
      striped,
      bordered,
      borderless,
      hover,
      size,
      variant,
      responsive,
      ...props
    } = this.props;

    const classes = classNames(
      bsPrefix,
      className,
      variant && `${bsPrefix}-${variant}`,
      size && `${bsPrefix}-${size}`,
      striped && `${bsPrefix}-striped`,
      bordered && `${bsPrefix}-bordered`,
      borderless && `${bsPrefix}-borderless`,
      hover && `${bsPrefix}-hover`,
    );

    const table = <table {...props} className={classes} />;

    if (responsive) {
      let responsiveClass = `${bsPrefix}-responsive`;
      if (typeof responsive === 'string') {
        responsiveClass = `${responsiveClass}-${responsive}`;
      }

      return <div className={responsiveClass}>{table}</div>;
    }

    return table;
  }
}

export default createBootstrapComponent(Table, 'table');