Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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.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.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;
}
}
}
}
}
@saumitra2810

This comment has been minimized.

Copy link
Owner Author

saumitra2810 commented Apr 30, 2018

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"]}
/>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.