griddle reactjs table

griddle-custom.js

import React, { Component } from "react";
import logo from "./logo.svg";
import "./App.css";
// import faker from "faker";
import Griddle, {
  plugins,
  RowDefinition,
  ColumnDefinition
} from "griddle-react";
// import Table from "./Table";
const groupNames = ["123", "456"];
const data = [
  {
    name: "label1",
    group1: {
      count: 100,
      percentage: 22
    },
    group2: {
      count: 50,
      percentage: 30
    }
  },
  {
    name: "label2",
    group1: {
      count: 60,
      percentage: 22
    },
    group2: {
      count: 50,
      percentage: 32
    }
  },
  {
    name: "label3",
    group1: {
      count: 5,
      percentage: 22
    },
    group2: {
      count: 6,
      percentage: 30
    }
  }
];

const customGroupComponent = ({value}) => {
  if(value && typeof value.count === 'function'){
    value = value.toJS();
    return (<div style={{display:'flex'}}> 
    <div style={{flex:1}}>{value.count}</div>
    <div style={{flex:1}}><div style={{color:'white',backgroundColor:'blue', width:`${value.percentage}%`, height:'100%', textAlign:'center'}}>{value.percentage}</div></div>
    </div>)
  }
}

class App extends Component {
  
  render() {
    return (
      <Griddle data={data} plugins={[plugins.LocalPlugin]} styleConfig={{
        styles: {
        
          Table: { width:'100%'}
        }
      }}>
        <RowDefinition>
          <ColumnDefinition id={"name"} title={"name"} />
          {groupNames.map((c,i) => {
            return <ColumnDefinition key={i} id={`group${i+1}`} title={`group${i+1}`} customComponent={customGroupComponent}/>;
          })}
        </RowDefinition>
      </Griddle>
    );
  }
}

export default App;