React CsvToHtmlTable JS

CsvToHtmlTable.js

// Essentially https://github.com/marudhupandiyang/react-csv-to-table , but JS instead of JSX

'use strict';

const e = ReactDOM.createElement;

function parseCsvToRowsAndColumn(csvText, csvColumnDelimiter = '\t') {
  const rows = csvText.split('\n');
  if (!rows || rows.length === 0) {
    return [];
  }

  return rows.map(row => row.split(csvColumnDelimiter));
}

class TableHeader extends React.Component {

  constructor(props) {
    super(props);
    this.state = Object.assign({}, props);
  }

  render() {
    let row = this.state.row;
    if (row && row.map) {
      return e(
        'thead',
        null,
        e('tr', null,
          row.map((column, i) => e('th', { key: `header-${i}` }, `${column}`))
        )
      )
    }
  }
}

class TableBody extends React.Component {

  constructor(props) {
    super(props);
    this.state = Object.assign({}, props);
  }

  render() {
    let rows = this.state.rows;
    if (rows && rows.map) {
      let rowKey = this.state.rowKey;
      let colKey = this.state.colKey;

      return e(
        'tbody',
        null,
        rows.map((row, rowIdx) =>
          e(
            'tr',
            {
              className: `${this.props.tableRowClassName}`,
              key: `${typeof (rowKey) === 'function' ? rowKey(row, rowIdx) : rowIdx}`
            },
            row.map ? row.map((column, colIdx) => e('td', {
              className: `${this.props.tableColumnClassName}`,
              key: `${typeof (colKey) === 'function' ? colKey(row, colIdx, rowIdx) : column[colKey]}`
            },
              `${typeof renderCell === 'function' ? renderCell(column, colIdx, rowIdx) : column}`)) : e('div')
          )
        ));
    }
  }
}

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

    this.state = Object.assign({
      data: this.props.data,
      rowKey: (row, rowIdx) => `row-${rowIdx}`,
      colKey: (col, colIdx, rowIdx) => `col-${colIdx}`,
      hasHeader: true,
      csvDelimiter: '\t',
      tableClassName: '',
      tableRowClassName: '',
      tableColumnClassName: '',
    }, props);
  }

  render() {
    let rowsWithColumns = parseCsvToRowsAndColumn(this.state.data.trim(), this.state.csvDelimiter);
    let headerRow = '';
    if (this.state.hasHeader) {
      headerRow = rowsWithColumns.splice(0, 1)[0];
    }

    return e(
      'table',
      { className: `csv-html-table ${this.state.tableClassName}` },
      e(TableHeader, { row: headerRow }),
      e(TableBody, Object.assign({}, this.state, { rows: rowsWithColumns }))
    )
  }
}

const sampleData = `
Model,mpg,cyl,disp,hp,drat,wt,qsec,vs,am,gear,carb
Mazda RX4,21,6,160,110,3.9,2.62,16.46,0,1,4,4
Mazda RX4 Wag,21,6,160,110,3.9,2.875,17.02,0,1,4,4
Datsun 710,22.8,4,108,93,3.85,2.32,18.61,1,1,4,1
Hornet 4 Drive,21.4,6,258,110,3.08,3.215,19.44,1,0,3,1
Hornet Sportabout,18.7,8,360,175,3.15,3.44,17.02,0,0,3,2
Valiant,18.1,6,225,105,2.76,3.46,20.22,1,0,3,1
Duster 360,14.3,8,360,245,3.21,3.57,15.84,0,0,3,4
Merc 240D,24.4,4,146.7,62,3.69,3.19,20,1,0,4,2
Merc 230,22.8,4,140.8,95,3.92,3.15,22.9,1,0,4,2
Merc 280,19.2,6,167.6,123,3.92,3.44,18.3,1,0,4,4
Merc 280C,17.8,6,167.6,123,3.92,3.44,18.9,1,0,4,4
Merc 450SE,16.4,8,275.8,180,3.07,4.07,17.4,0,0,3,3
Merc 450SL,17.3,8,275.8,180,3.07,3.73,17.6,0,0,3,3
Merc 450SLC,15.2,8,275.8,180,3.07,3.78,18,0,0,3,3
Cadillac Fleetwood,10.4,8,472,205,2.93,5.25,17.98,0,0,3,4
Lincoln Continental,10.4,8,460,215,3,5.424,17.82,0,0,3,4
Chrysler Imperial,14.7,8,440,230,3.23,5.345,17.42,0,0,3,4
Fiat 128,32.4,4,78.7,66,4.08,2.2,19.47,1,1,4,1
`;

ReactDOM.render(
  e(CsvToHtmlTable, { data: sampleData, csvDelimiter: ',' }),
  document.querySelector(".some-stuff")
);