openreplay/frontend/app/components/Dashboard/Widgets/common/Table.js

import React from 'react';
import cn from 'classnames';
import { Button } from 'antd';
import stl from './table.module.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,
      maxHeight = 200,
      onRowClick = null,
      isTemplate,
    } = this.props;
    const { showAll } = this.state;

    const isShowMoreButtonVisible =
      !isTemplate && rows.size > (small ? 3 : 5) && !showAll;
    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')}
          style={{ maxHeight: `${maxHeight}px` }}
        >
          {rows.take(showAll ? rows.size : small ? 3 : 5).map((row) => (
            <div
              className={cn(
                rowClass,
                stl.row,
                { [stl.bottomBorder]: isShowMoreButtonVisible },
                { [stl.small]: small, 'cursor-pointer': !!onRowClick },
              )}
              key={row.key}
              onClick={onRowClick ? (e) => onRowClick(e, row) : () => null}
            >
              {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>
          ))}
        </div>
        {isShowMoreButtonVisible && (
          <div className="w-full flex justify-center mt-2">
            <Button onClick={this.onLoadMoreClick} type="text">
              {`${rows.size} More`}
            </Button>
          </div>
        )}
      </div>
    );
  }
}