62 lines
1.8 KiB
JavaScript
62 lines
1.8 KiB
JavaScript
import cn from 'classnames';
|
|
import { Button } from 'UI';
|
|
import stl from './table.css';
|
|
|
|
export default class Table extends React.PureComponent {
|
|
state = { showAll: false };
|
|
|
|
onLoadMoreClick = () => {
|
|
this.setState({ showAll: true });
|
|
}
|
|
|
|
render() {
|
|
const {
|
|
cols,
|
|
rows = [],
|
|
rowProps,
|
|
rowClass = '',
|
|
small = false,
|
|
compare = false
|
|
} = this.props;
|
|
const { showAll } = this.state;
|
|
|
|
return (
|
|
<div className="w-full">
|
|
<div className="flex">
|
|
{
|
|
cols.map(({
|
|
key, title, width,
|
|
}) =>
|
|
<div key={ key } style={ { width } } className={ stl.header }>{ title }</div>)
|
|
}
|
|
</div>
|
|
<div className={ cn(stl.content, "thin-scrollbar") }>
|
|
{ rows.take(showAll ? 10 : (small ? 3 : 5)).map(row => (
|
|
<div className={ cn(rowClass, stl.row, { [stl.small]: small}) } key={ row.key }>
|
|
{ cols.map(({ cellClass = '', className = '', Component, key, toText = t => t, width }) => (
|
|
<div className={ cn(stl.cell, cellClass) } style={{ width }} key={ key }> { Component
|
|
? <Component compare={compare} data={ row } { ...rowProps } />
|
|
: <div className={ cn(stl.text, className) }> { toText(row[ key ]) } </div>
|
|
}
|
|
</div>
|
|
)) }
|
|
</div>
|
|
)) }
|
|
|
|
{ rows.size > (small ? 3 : 5) && !showAll &&
|
|
<div className="w-full flex justify-center mt-3">
|
|
<Button
|
|
onClick={ this.onLoadMoreClick }
|
|
plain
|
|
small
|
|
className="text-center"
|
|
>
|
|
{ 'Load More' }
|
|
</Button>
|
|
</div>
|
|
}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
}
|