Generalised Table using Shopify Polaris

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import 'Table.css';
import { Card, Stack, Pagination, SkeletonDisplayText} from '@shopify/polaris';

export default class GeneralisedTable extends Component {
  static propTypes = {
    tableHeaders: PropTypes.array.isRequired,                 // array of header labels. Should be an array of strings
    attributeRenderFunctions: PropTypes.array.isRequired,     // array of render functions. function accepts an item from tableData, index of the item in the current page and the active offset (if pagination is enabled) as param and returns markup for that row
    tableData: PropTypes.array.isRequired,                    // the actual data array                 
    onDataExhausted: PropTypes.func,                          // relevant when pagination is enabled. Tells what to do when the current dataset is exhausted. (Make API call with updated offset and concat data to the tableData prop)
    doPagination: PropTypes.bool,                             // should pagination handles be shown
    pageLimit: PropTypes.number,                              // how many items to show on a page
    activeOffset: PropTypes.number,                           // if data should be shown starting from an offset
    noDataPlaceholderText: PropTypes.string,                  // what text to show when there is no data
    fetchInProgress: PropTypes.bool                           // boolean flag that denotes if currently fetching is going on
  }

  constructor(props){
    super(props);
    this.loadingContent = [];
    this.currentOffset = 0;
    
    for(let header of props.tableHeaders){
      this.loadingContent.push(<td key={header}><SkeletonDisplayText /></td>)
    }
    this.state.items = this.compileTableData(props);
    this.onNextPage = this.onNextPage.bind(this);
    this.onPreviousPage = this.onPreviousPage.bind(this);
  }

  componentWillReceiveProps(nextProps) {
    this.setState({items: this.compileTableData(nextProps)});
  }

  onNextPage(){
    this.currentOffset += this.props.pageLimit;
    if(this.props.tableData.length - this.currentOffset == 0){      // eg tableData has 15 elements. we are on page 2. 15 - 10 + 10 != 0, meaning we dont have enough elements
      this.props.onDataExhausted(this.currentOffset);
    }else{
      this.setState({items: this.compileTableData(this.props)});  
    }
  }
  onPreviousPage(){
    if(this.currentOffset - this.props.pageLimit >= 0){
      this.currentOffset -= this.props.pageLimit;
      this.setState({items: this.compileTableData(this.props)});   
    }
  }
  compileTableData(props){
    let currentTableData;
    if(props.doPagination){
      let offset = (props.activeOffset ? props.activeOffset : this.currentOffset);    // in case we paginate and fetch next page data
      let limit = offset + props.pageLimit;
      currentTableData = props.tableData.slice(offset, limit);  
    } else{
      currentTableData =  props.tableData;  
    }
    let formattedTableData = [], formattedRow, columnContent, rowIndex = 0;
    for(let dataRow of currentTableData){
      formattedRow = [];
      for(let renderFn of props.attributeRenderFunctions){
        formattedRow.push(renderFn(dataRow, rowIndex, this.currentOffset)); 
      }
      formattedTableData.push(formattedRow);
      rowIndex++;
    }
    return formattedTableData;
  }

  render() {
    return (
      <div>
        <Card>
          <table className="results Polaris">
            <thead>
              <tr>
                {
                  this.props.tableHeaders.map((header) => {
                    return <th key={header}> {header} </th>;
                  })
                }
              </tr>
            </thead>
            <tbody>
              {
                this.props.fetchInProgress
                  ?
                  <tr>{this.loadingContent}</tr>
                  :
                  (
                    this.state.items.length > 0 ? 
                      this.state.items.map((row, i) =>
                        <tr key={i}>
                          {row.map((col, j) =>
                            <td key={i+"_" +j}>{col}</td>
                          )}
                        </tr>
                      )
                    : (
                      <tr>
                        <td style={{textAlign: 'center'}} colSpan={this.props.tableHeaders.length}>
                          {this.props.noDataPlaceholderText ? 
                            this.props.noDataPlaceholderText 
                            : "No data found."}
                        </td>
                      </tr>
                    )
                  )
              }
            </tbody>
          </table>
        </Card>
        <br />
        {
          this.props.doPagination ?
          <Stack distribution="center">
            <Pagination
              hasPrevious={this.currentOffset !== 0}
              onPrevious={() => {this.onPreviousPage()}}
              hasNext={this.state.items.length >= this.props.pageLimit}
              onNext={() => {this.onNextPage()}} />
          </Stack>
          : ""
        }
        <br />
      </div>
    )
  }
}

Table.css

table.Polaris {
  width: 100%; }
  table.Polaris tbody tr:nth-child(odd) {
    background: #fafbfc; }
  table.Polaris tbody tr:last-child td {
    border-bottom-width: 0; }
  table.Polaris th,
  table.Polaris td {
    padding: 1.2rem 1.5rem;
    text-align: left; }
  table.Polaris th {
    font-weight: normal;
    border-bottom: .1rem solid #d3dbe2; }
    table.Polaris th:hover {
      cursor: pointer; }
    table.Polaris th:empty:hover {
      cursor: default; }
  table.Polaris td .icon-image {
    float: left;
    display: inline-block;
    min-width: 2.4rem;
    min-height: 2.4rem; }
    table.Polaris td .icon-image:after {
      min-width: 2.4rem;
      min-height: 2.4rem;
      background-size: 24px 24px;
      /* IE requires pixels. Using cover/contain/rem values cause blurry edges */
      vertical-align: middle;
      display: inline-block; }
  table.Polaris.results tr td {
    padding-top: .8rem;
    padding-bottom: .8rem; }
  table.Polaris.summary th {
    padding: 0 0 2.0rem 0;
    border: 0;
    font-size: 1.2rem;
    font-weight: 600;
    text-transform: uppercase; }
    table.Polaris.summary th:hover {
      cursor: auto;
      background-color: transparent;
      color: inherit; }
    table.Polaris.summary th span {
      float: right;
      color: #707070;
      text-transform: none;
      font-weight: 300; }
  table.Polaris.summary tr:hover {
    background-color: transparent; }
  table.Polaris.summary tr td {
    padding: .4rem 0;
    border: 0; }
    table.Polaris.summary tr td:first-child {
      width: 67%; }
    table.Polaris.summary tr td:last-child {
      text-align: right;
      color: #95a7b7; }

Table.scss

table.Polaris {
  width: 100%;

  tbody {

    tr {

      &:nth-child(odd) {
        background: #fafbfc;
      }

      &:last-child {

        td {
          border-bottom-width: 0;
        }
      }
    }
  }
  th,
  td {
    padding: 1.2rem 1.5rem;
    text-align: left;
  }
  th {
    font-weight: normal;
    border-bottom: .1rem solid #d3dbe2;

    &:hover {
      cursor: pointer;
    }
    &:empty:hover {
      cursor: default;
    }
  }
  td {

    .icon-image {
      float: left;
      display: inline-block;
      min-width: 2.4rem;
      min-height: 2.4rem;

      &:after {
        min-width: 2.4rem;
        min-height: 2.4rem;
        background-size: 24px 24px; /* IE requires pixels. Using cover/contain/rem values cause blurry edges */
        vertical-align: middle;
        display: inline-block;
    	}
    }
  }

  &.results {

    tr {

      td {
        padding-top: .8rem;
        padding-bottom: .8rem;
      }
    }
  }
  &.summary {

    th {
      padding: 0 0 2.0rem 0;
      border: 0;
      font-size: 1.2rem;
      font-weight: 600;
      text-transform: uppercase;

      &:hover {
        cursor: auto;
        background-color: transparent;
        color: inherit;
      }

      span {
        float: right;
        color: hsl(0,0%,44%);
        text-transform: none;
        font-weight: 300;
      }
    }

    tr {

      &:hover {
        background-color: transparent;
      }
      td {
        padding: .4rem 0;
        border: 0;

        &:first-child {
          width: 67%;
        }
        &:last-child {
          text-align: right;
          color: #95a7b7;
        }
      }
    }
  }
}

Sample usage -

<GeneralisedTable tableData={[
{column1: "X", column2: "A", column3: "C", column4: "E"},
{column1: "Y", column2: "B", column3: "D", column4: "F"}
]}
attributeRenderFunctions={[
function(item){return item.column1;}, function(item){return item.column2;},
function(item){return item.column3;}, function(item){return item.column4;}
]}
tableHeaders={["Title 1", "Title 2", "Title 3", "Title 4"]}
/>