All files / components/ScrollTable ScrollTable.tsx

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
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import _ from 'lodash';
import React from 'react';
import PropTypes from 'react-peek/prop-types';
import { StandardProps, omitProps } from '../../util/component-types';
import { lucidClassNames } from '../../util/style-helpers';
import Table from '../Table/Table';
 
const cx = lucidClassNames.bind('&-ScrollTable');
 
const { object, string, bool, node, number, oneOfType } = PropTypes;
 
const defaultProps = {
	hasWordWrap: false,
	hasBorder: false,
};
 
export interface IScrollTableProps
	extends StandardProps,
		React.DetailedHTMLProps<
			React.HTMLAttributes<HTMLDivElement>,
			HTMLDivElement
		> {
	/** Set the width of the Table inside the scrollable container. */
	tableWidth?: number | string;
 
	/** Set the Table contents to not allow word wrapping. */
	hasWordWrap: boolean;
 
	/** render the table with borders on the outer edge. */
	hasBorder: boolean;
}
 
export const ScrollTable = (props: IScrollTableProps): React.ReactElement => {
	const {
		children,
		className,
		style,
		tableWidth,
		hasWordWrap,
		hasBorder,
		...passThroughs
	} = props;
 
	return (
		<div
			className={cx(
				'&',
				{
					'&-has-border': hasBorder,
				},
				className
			)}
			style={style}
		>
			<Table
				{...omitProps(
					passThroughs,
					undefined,
					_.keys(ScrollTable.propTypes),
					false
				)}
				style={{
					width: tableWidth,
				}}
				hasWordWrap={hasWordWrap}
			>
				{children}
			</Table>
		</div>
	);
};
 
ScrollTable.defaultProps = defaultProps;
 
ScrollTable.displayName = 'ScrollTable';
 
ScrollTable.peek = {
	description: `
		Table in a scrollable container.
	`,
	categories: ['table'],
	madeFrom: ['Table'],
};
 
ScrollTable.Thead = Table.Thead;
ScrollTable.Tbody = Table.Tbody;
ScrollTable.Tr = Table.Tr;
ScrollTable.Th = Table.Th;
ScrollTable.Td = Table.Td;
 
ScrollTable.propTypes = {
	children: node`
		{Thead, Tbody, Tr, Th, Td} are the child components of Scrolltable, same
		as Table.
	`,
 
	className: string`
		Class names that are appended to the defaults.
	`,
 
	style: object`
		Styles that are passed through to the root container.
	`,
 
	tableWidth: oneOfType([number, string])`
		Set the width of the Table inside the scrollable container.
	`,
 
	hasWordWrap: bool`
		Set the Table contents to not allow word wrapping.
	`,
 
	hasBorder: bool`
		render the table with borders on the outer edge.
	`,
};
 
export default ScrollTable;