@6thquake/react-material/es/Table/AwesomeTable/Body.js

React components that implement Google's Material Design.

import _extends from "@babel/runtime/helpers/extends";
import React from 'react';
import PropTypes from 'prop-types';
import update from 'immutability-helper';
import Table from '..';
import TableBody from '../../TableBody';
import TableCell from './Cell';
import TableHead from '../../TableHead';
import TableRow from '../../TableRow';
import Scrollbar from '../../Scrollbar';
import { withStyles } from '../../styles';

const styles = theme => ({
  root: {
    overflowY: 'auto',
    overflowX: 'hidden',
    width: 'fit-content' // width:100%

  },
  layoutFixed: {
    tableLayout: 'fixed'
  }
});

const colStyle = {
  // width: 150,
  minWidth: 100
};
/**
 * @ignore - internal component.
 */

class Body extends React.Component {
  constructor(props) {
    super(props);

    this.handleRowClick = (entry, index) => e => {
      const {
        onRowClick
      } = this.props;
      onRowClick && onRowClick(entry, index);
    };

    this.state = {};
  }

  componentDidMount() {}

  render() {
    const {
      classes,
      data,
      columns,
      type,
      scroll,
      tableRef,
      bodyRef,
      bodyRowHeight,
      height,
      noData,
      TableCellProps,
      TableRowProps
    } = this.props;
    const mainAndNoData = data.length === 0 && type === 'main';
    const tableStyle = mainAndNoData ? {
      height: '100%'
    } : {};
    const rowStyle = {
      height: bodyRowHeight
    };
    return React.createElement("div", {
      ref: tableRef,
      onScroll: e => {
        scroll(e, type);
      },
      style: {
        height
      },
      className: classes.root
    }, React.createElement(Table, {
      innerRef: bodyRef,
      classes: {
        root: classes.layoutFixed
      },
      className: classes.table,
      style: tableStyle
    }, React.createElement("colgroup", null, columns.map(item => {
      return React.createElement("col", {
        key: item.title,
        style: colStyle,
        width: item.width
      });
    })), React.createElement(TableBody, null, mainAndNoData ? React.createElement(TableRow, _extends({
      style: {
        height: '100%'
      }
    }, TableRowProps), React.createElement(TableCell, {
      TableCellProps: TableCellProps,
      colSpan: columns.length,
      style: {
        height: '100%'
      }
    }, noData)) : data.map((entry, index) => {
      return React.createElement(TableRow, _extends({
        onClick: this.handleRowClick(entry, index),
        style: rowStyle,
        key: entry.key
      }, TableRowProps), columns.map(column => {
        return React.createElement(TableCell, {
          numeric: column.numeric,
          TableCellProps: TableCellProps,
          key: column.key || Date.now()
        }, column.render ? column.render(entry) : entry[column.dataIndex]);
      }));
    }))));
  }

}

process.env.NODE_ENV !== "production" ? Body.propTypes = {
  classes: PropTypes.object.isRequired,
  height: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
} : void 0;
Body.defaultProps = {
  height: 'auto'
};
export default withStyles(styles)(Body);