/
Table.js
72 lines (62 loc) · 1.76 KB
/
Table.js
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
import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import { mapToCssModules, deprecated, tagPropType } from './utils';
const propTypes = {
className: PropTypes.string,
cssModule: PropTypes.object,
size: PropTypes.string,
bordered: PropTypes.bool,
borderless: PropTypes.bool,
striped: PropTypes.bool,
inverse: deprecated(PropTypes.bool, 'Please use the prop "dark"'),
dark: PropTypes.bool,
hover: PropTypes.bool,
responsive: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
tag: tagPropType,
responsiveTag: tagPropType,
innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.string, PropTypes.object]),
};
const defaultProps = {
tag: 'table',
responsiveTag: 'div',
};
const Table = (props) => {
const {
className,
cssModule,
size,
bordered,
borderless,
striped,
inverse,
dark,
hover,
responsive,
tag: Tag,
responsiveTag: ResponsiveTag,
innerRef,
...attributes
} = props;
const classes = mapToCssModules(classNames(
className,
'table',
size ? 'table-' + size : false,
bordered ? 'table-bordered' : false,
borderless ? 'table-borderless' : false,
striped ? 'table-striped' : false,
(dark || inverse) ? 'table-dark' : false,
hover ? 'table-hover' : false,
), cssModule);
const table = <Tag {...attributes} ref={innerRef} className={classes} />;
if (responsive) {
const responsiveClassName = mapToCssModules(responsive === true ? 'table-responsive' : `table-responsive-${responsive}`, cssModule);
return (
<ResponsiveTag className={responsiveClassName}>{table}</ResponsiveTag>
);
}
return table;
};
Table.propTypes = propTypes;
Table.defaultProps = defaultProps;
export default Table;