FlowsTable.js

import Header from 'components/clients/Flows/Table/Header/Header'
import * as React from 'react'
import Table, {AutoResizer, Column} from 'react-base-table'
import 'react-base-table/styles.css'
// import styled from '@emotion/styled'
// import { colors, fontFamily } from 'styles/theme'
import FlowStatus from './Columns/FlowStatus'
import FlowName from './Columns/FlowName'
import Contacts from './Columns/Contacts'
import Engaged from './Columns/Engaged'
import NoInterest from './Columns/NoInterest'
import Failed from './Columns/Failed'
import ActiveFlows from './Columns/ActiveFlows'
import Steps from './Columns/Steps'
import Actions from './Columns/FlowActions'
import Errored from './Columns/ErroredFlows'
import Stopped from './Columns/StoppedFlows'
import NoResponse from './Columns/NoResponse'
// import {css} from '@emotion/core'
// import {defaultColumns} from './Columns/defaultColumns'


const defaultColumns =  [
  {
    dataKey: 'flowStatus',
    title: 'Status',
    width: 100,
    sortable: true,
    align: Column.Alignment.CENTER,
    frozen: Column.FrozenDirection.LEFT,
    headerRenderer: () =>  (<Header label={"STATUS"}/>),
    cellRenderer: (props) => (<FlowStatus {...props}/>)
  },
  {
    dataKey: 'flowName',
    title: 'Flow Name',
    width: 250,
    sortable: true,
    frozen: Column.FrozenDirection.LEFT,
    headerRenderer: () =>  (<Header label={"FLOW NAME"}/>),
    cellRenderer: (props) => (<FlowName {...props}/>)
  },
  {
    dataKey: 'contacts',
    title: 'Contacts',
    width: 120, 
    sortable: true,
    headerRenderer: () =>  (<Header label={"CONTACTS"}/>),
    cellRenderer: (props) => (<Contacts {...props}/>)
  },
  {
    dataKey: 'engaged',
    title: 'Engaged',
    width: 120,
    sortable: true,
    headerRenderer: () =>  (<Header label={"ENGAGED"}/>),
    cellRenderer: (props) => (<Engaged {...props}/>)

  },
  {
    dataKey: 'noInterest',
    title: 'No Interest',
    width: 120,
    sortable: true,
    headerRenderer: () =>  (<Header label={"NO INTEREST"}/>),
    cellRenderer: (props) => (<NoInterest {...props}/>)

  },
  {
    dataKey: 'noResponse',
    title: 'No Response',
    width: 120,
    sortable: true,
    headerRenderer: () =>  (<Header label={"NO RESPONSE"}/>),
    cellRenderer: (props) => (<NoResponse {...props}/>)

  },
  {
    dataKey: 'failed',
    title: 'Failed',
    width: 120,
    sortable: true,
    headerRenderer: () =>  (<Header label={"FAILED"}/>),
    cellRenderer: (props) => (<Failed {...props}/>)
  },
  {
    dataKey: 'steps',
    title: 'Steps / Days',
    width: 100,
    sortable: true,
    headerRenderer: () =>  (<Header label={"STEPS/DAYS"}/>),
    cellRenderer: (props) => (<Steps {...props}/>)
  },
  {
    dataKey: 'actions',
    title: 'Actions',
    minWidth: 300,
    width: 300,
    sortable: true,
    headerRenderer: () =>  (<Header label={"ACTIONS"}/>),
    cellRenderer: (props) => (<Actions {...props}/>)
  },
  {
    dataKey: 'activeFlows',
    title: 'Active',
    minWidth: 120,
    width: 120,
    sortable: true,
    headerRenderer: () =>  (<Header label={"ACTIVE"}/>),
    cellRenderer: (props) => (<ActiveFlows {...props}/>)
  },
  {
    dataKey: 'stopped',
    title: 'stopped',
    minWidth: 120,
    width: 120,
    sortable: true,
    headerRenderer: () =>  (<Header label={"STOPPED"}/>),
    cellRenderer: (props) => (<Stopped {...props}/>)
  },
  {
    dataKey: 'error',
    title: 'error',
    minWidth: 120,
    width: 120,
    sortable: true,
    headerRenderer: () =>  (<Header label={"ERROR"}/>),
    cellRenderer: (props) => (<Errored {...props}/>)
  }
]

const flowData: Array<object> = [
  {
    flowName: 'Testing Flow 1', 
    flowStatus: 'active',
    contacts: 1234,
    engaged: 234,
    noResponse: 35,
    noInterest: 45,
    failed: 123,
    steps: 12,
    actions: ['email','video', 'time', 'call'],
    activeFlows: 234,
  },
  {
    flowName: 'Testing Flow 2', 
    flowStatus: 'draft',
    contacts: 1234,
    engaged: 234,
    noResponse: 35,
    noInterest: 45,
    failed: 123,
    steps: 12,
    actions: ['email','video', 'call', 'email', 'note'],
    activeFlows: 234,
  },
  {
    flowName: 'Testing Flow 1', 
    flowStatus: 'active',
    contacts: 1234,
    engaged: 234,
    noResponse: 35,
    noInterest: 45,
    failed: 123,
    steps: 12,
    actions: ['email','video', 'time', 'call'],
    activeFlows: 234,
  },
  {
    flowName: 'Testing Flow 2', 
    flowStatus: 'draft',
    contacts: 1234,
    engaged: 234,
    noResponse: 35,
    noInterest: 45,
    failed: 123,
    steps: 12,
    actions: ['email','video', 'call', 'note'],
    activeFlows: 234,
  },
  {
    flowName: 'Testing Flow 1', 
    flowStatus: 'active',
    contacts: 1234,
    engaged: 234,
    noResponse: 35,
    noInterest: 45,
    failed: 123,
    steps: 12,
    actions: ['email','video', 'call', 'email', 'note'],
    activeFlows: 234,
  },
  {
    flowName: 'Testing Flow 2', 
    flowStatus: 'draft',
    contacts: 1234,
    engaged: 234,
    noResponse: 35,
    noInterest: 45,
    failed: 123,
    steps: 12,
    actions: ['email', 'time','video', 'call'],
    activeFlows: 234,
  },
  {
    flowName: 'Testing Flow 1', 
    flowStatus: 'active',
    contacts: 1234,
    engaged: 234,
    noResponse: 35,
    noInterest: 45,
    failed: 123,
    steps: 12,
    actions: ['email', 'time', 'video'],
    activeFlows: 234,
  },
  {
    flowName: 'Testing Flow 2', 
    flowStatus: 'draft',
    contacts: 1234,
    engaged: 234,
    noResponse: 35,
    noInterest: 45,
    failed: 123,
    steps: 12,
    actions: ['email','video', 'call'],
    activeFlows: 234,
  },
  {
    flowName: 'Testing Flow 1', 
    flowStatus: 'active',
    contacts: 1234,
    engaged: 234,
    noResponse: 35,
    noInterest: 45,
    failed: 123,
    steps: 12,
    actions: ['email', 'time', 'video', 'call'],
    activeFlows: 234,
  },
  {
    flowName: 'Testing Flow 2', 
    flowStatus: 'draft',
    contacts: 1234,
    engaged: 234,
    noResponse: 35,
    noInterest: 45,
    failed: 123,
    steps: 12,
    actions: ['email','video', 'call'],
    activeFlows: 234,
  },
  {
    flowName: 'Testing Flow 1', 
    flowStatus: 'active',
    contacts: 1234,
    engaged: 234,
    noResponse: 35,
    noInterest: 45,
    failed: 123,
    steps: 12,
    actions: ['email','video', 'call'],
    activeFlows: 234,
  },
  {
    flowName: 'Testing Flow 2', 
    flowStatus: 'draft',
    contacts: 1234,
    engaged: 234,
    noResponse: 35,
    noInterest: 45,
    failed: 123,
    steps: 12,
    actions: ['email','video', 'call'],
    activeFlows: 234,
  },
  {
    flowName: 'Testing Flow 1', 
    flowStatus: 'active',
    contacts: 1234,
    engaged: 234,
    noResponse: 35,
    noInterest: 45,
    failed: 123,
    steps: 12,
    actions: ['email','video', 'time', 'call'],
    activeFlows: 234,
  },
  {
    flowName: 'Testing Flow 2', 
    flowStatus: 'draft',
    contacts: 1234,
    engaged: 234,
    noResponse: 35,
    noInterest: 45,
    failed: 123,
    steps: 12,
    actions: ['email','video', 'call', 'email', 'note'],
    activeFlows: 234,
  },
  {
    flowName: 'Testing Flow 1', 
    flowStatus: 'active',
    contacts: 1234,
    engaged: 234,
    noResponse: 35,
    noInterest: 45,
    failed: 123,
    steps: 12,
    actions: ['email','video', 'time', 'call'],
    activeFlows: 234,
  },
  {
    flowName: 'Testing Flow 2', 
    flowStatus: 'draft',
    contacts: 1234,
    engaged: 234,
    noResponse: 35,
    noInterest: 45,
    failed: 123,
    steps: 12,
    actions: ['email','video', 'call', 'note'],
    activeFlows: 234,
  },
  {
    flowName: 'Testing Flow 1', 
    flowStatus: 'active',
    contacts: 1234,
    engaged: 234,
    noResponse: 35,
    noInterest: 45,
    failed: 123,
    steps: 12,
    actions: ['email','video', 'call', 'email', 'note'],
    activeFlows: 234,
  },
  {
    flowName: 'Testing Flow 2', 
    flowStatus: 'draft',
    contacts: 1234,
    engaged: 234,
    noResponse: 35,
    noInterest: 45,
    failed: 123,
    steps: 12,
    actions: ['email', 'time','video', 'call'],
    activeFlows: 234,
  },
  {
    flowName: 'Testing Flow 1', 
    flowStatus: 'active',
    contacts: 1234,
    engaged: 234,
    noResponse: 35,
    noInterest: 45,
    failed: 123,
    steps: 12,
    actions: ['email', 'time', 'video'],
    activeFlows: 234,
  },
  {
    flowName: 'Testing Flow 2', 
    flowStatus: 'draft',
    contacts: 1234,
    engaged: 234,
    noResponse: 35,
    noInterest: 45,
    failed: 123,
    steps: 12,
    actions: ['email','video', 'call'],
    activeFlows: 234,
  },
  {
    flowName: 'Testing Flow 1', 
    flowStatus: 'active',
    contacts: 1234,
    engaged: 234,
    noResponse: 35,
    noInterest: 45,
    failed: 123,
    steps: 12,
    actions: ['email', 'time', 'video', 'call'],
    activeFlows: 234,
  },
  {
    flowName: 'Testing Flow 2', 
    flowStatus: 'draft',
    contacts: 1234,
    engaged: 234,
    noResponse: 35,
    noInterest: 45,
    failed: 123,
    steps: 12,
    actions: ['email','video', 'call'],
    activeFlows: 234,
  },
  {
    flowName: 'Testing Flow 1', 
    flowStatus: 'active',
    contacts: 1234,
    engaged: 234,
    noResponse: 35,
    noInterest: 45,
    failed: 123,
    steps: 12,
    actions: ['email','video', 'call'],
    activeFlows: 234,
  },
  {
    flowName: 'Testing Flow 2', 
    flowStatus: 'draft',
    contacts: 1234,
    engaged: 234,
    noResponse: 35,
    noInterest: 45,
    failed: 123,
    steps: 12,
    actions: ['email','video', 'call'],
    activeFlows: 234,
  },
  {
    flowName: 'Testing Flow 1', 
    flowStatus: 'active',
    contacts: 1234,
    engaged: 234,
    noResponse: 35,
    noInterest: 45,
    failed: 123,
    steps: 12,
    actions: ['email','video', 'time', 'call'],
    activeFlows: 234,
  },
  {
    flowName: 'Testing Flow 2', 
    flowStatus: 'draft',
    contacts: 1234,
    engaged: 234,
    noResponse: 35,
    noInterest: 45,
    failed: 123,
    steps: 12,
    actions: ['email','video', 'call', 'email', 'note'],
    activeFlows: 234,
  },
  {
    flowName: 'Testing Flow 1', 
    flowStatus: 'active',
    contacts: 1234,
    engaged: 234,
    noResponse: 35,
    noInterest: 45,
    failed: 123,
    steps: 12,
    actions: ['email','video', 'time', 'call'],
    activeFlows: 234,
  },
  {
    flowName: 'Testing Flow 2', 
    flowStatus: 'draft',
    contacts: 1234,
    engaged: 234,
    noResponse: 35,
    noInterest: 45,
    failed: 123,
    steps: 12,
    actions: ['email','video', 'call', 'note'],
    activeFlows: 234,
  },
  {
    flowName: 'Testing Flow 1', 
    flowStatus: 'active',
    contacts: 1234,
    engaged: 234,
    noResponse: 35,
    noInterest: 45,
    failed: 123,
    steps: 12,
    actions: ['email','video', 'call', 'email', 'note'],
    activeFlows: 234,
  },
  {
    flowName: 'Testing Flow 2', 
    flowStatus: 'draft',
    contacts: 1234,
    engaged: 234,
    noResponse: 35,
    noInterest: 45,
    failed: 123,
    steps: 12,
    actions: ['email', 'time','video', 'call'],
    activeFlows: 234,
  },
  {
    flowName: 'Testing Flow 1', 
    flowStatus: 'active',
    contacts: 1234,
    engaged: 234,
    noResponse: 35,
    noInterest: 45,
    failed: 123,
    steps: 12,
    actions: ['email', 'time', 'video'],
    activeFlows: 234,
  },
  {
    flowName: 'Testing Flow 2', 
    flowStatus: 'draft',
    contacts: 1234,
    engaged: 234,
    noResponse: 35,
    noInterest: 45,
    failed: 123,
    steps: 12,
    actions: ['email','video', 'call'],
    activeFlows: 234,
  },
  {
    flowName: 'Testing Flow 1', 
    flowStatus: 'active',
    contacts: 1234,
    engaged: 234,
    noResponse: 35,
    noInterest: 45,
    failed: 123,
    steps: 12,
    actions: ['email', 'time', 'video', 'call'],
    activeFlows: 234,
  },
  {
    flowName: 'Testing Flow 2', 
    flowStatus: 'draft',
    contacts: 1234,
    engaged: 234,
    noResponse: 35,
    noInterest: 45,
    failed: 123,
    steps: 12,
    actions: ['email','video', 'call'],
    activeFlows: 234,
  },
  {
    flowName: 'Testing Flow 1', 
    flowStatus: 'active',
    contacts: 1234,
    engaged: 234,
    noResponse: 35,
    noInterest: 45,
    failed: 123,
    steps: 12,
    actions: ['email','video', 'call'],
    activeFlows: 234,
  },
  {
    flowName: 'Testing Flow 2', 
    flowStatus: 'draft',
    contacts: 1234,
    engaged: 234,
    noResponse: 35,
    noInterest: 45,
    failed: 123,
    steps: 12,
    actions: ['email','video', 'call'],
    activeFlows: 234,
  },
  {
    flowName: 'Testing Flow 1', 
    flowStatus: 'active',
    contacts: 1234,
    engaged: 234,
    noResponse: 35,
    noInterest: 45,
    failed: 123,
    steps: 12,
    actions: ['email','video', 'time', 'call'],
    activeFlows: 234,
  },
  {
    flowName: 'Testing Flow 2', 
    flowStatus: 'draft',
    contacts: 1234,
    engaged: 234,
    noResponse: 35,
    noInterest: 45,
    failed: 123,
    steps: 12,
    actions: ['email','video', 'call', 'email', 'note'],
    activeFlows: 234,
  },
  {
    flowName: 'Testing Flow 1', 
    flowStatus: 'active',
    contacts: 1234,
    engaged: 234,
    noResponse: 35,
    noInterest: 45,
    failed: 123,
    steps: 12,
    actions: ['email','video', 'time', 'call'],
    activeFlows: 234,
  },
  {
    flowName: 'Testing Flow 2', 
    flowStatus: 'draft',
    contacts: 1234,
    engaged: 234,
    noResponse: 35,
    noInterest: 45,
    failed: 123,
    steps: 12,
    actions: ['email','video', 'call', 'note'],
    activeFlows: 234,
  },
  {
    flowName: 'Testing Flow 1', 
    flowStatus: 'active',
    contacts: 1234,
    engaged: 234,
    noResponse: 35,
    noInterest: 45,
    failed: 123,
    steps: 12,
    actions: ['email','video', 'call', 'email', 'note'],
    activeFlows: 234,
  },
  {
    flowName: 'Testing Flow 2', 
    flowStatus: 'draft',
    contacts: 1234,
    engaged: 234,
    noResponse: 35,
    noInterest: 45,
    failed: 123,
    steps: 12,
    actions: ['email', 'time','video', 'call'],
    activeFlows: 234,
  },
  {
    flowName: 'Testing Flow 1', 
    flowStatus: 'active',
    contacts: 1234,
    engaged: 234,
    noResponse: 35,
    noInterest: 45,
    failed: 123,
    steps: 12,
    actions: ['email', 'time', 'video'],
    activeFlows: 234,
  },
  {
    flowName: 'Testing Flow 2', 
    flowStatus: 'draft',
    contacts: 1234,
    engaged: 234,
    noResponse: 35,
    noInterest: 45,
    failed: 123,
    steps: 12,
    actions: ['email','video', 'call'],
    activeFlows: 234,
  },
  {
    flowName: 'Testing Flow 1', 
    flowStatus: 'active',
    contacts: 1234,
    engaged: 234,
    noResponse: 35,
    noInterest: 45,
    failed: 123,
    steps: 12,
    actions: ['email', 'time', 'video', 'call'],
    activeFlows: 234,
  },
  {
    flowName: 'Testing Flow 2', 
    flowStatus: 'draft',
    contacts: 1234,
    engaged: 234,
    noResponse: 35,
    noInterest: 45,
    failed: 123,
    steps: 12,
    actions: ['email','video', 'call'],
    activeFlows: 234,
  },
  {
    flowName: 'Testing Flow 1', 
    flowStatus: 'active',
    contacts: 1234,
    engaged: 234,
    noResponse: 35,
    noInterest: 45,
    failed: 123,
    steps: 12,
    actions: ['email','video', 'call'],
    activeFlows: 234,
  },
  {
    flowName: 'Testing Flow 2', 
    flowStatus: 'draft',
    contacts: 1234,
    engaged: 234,
    noResponse: 35,
    noInterest: 45,
    failed: 123,
    steps: 12,
    actions: ['email','video', 'call'],
    activeFlows: 234,
  }
]



const FlowsTable: React.FunctionComponent = () => {
  const data = React.useMemo(() => flowData, [flowData])
  return (
    <>  
      <AutoResizer>
        {({width, height}) => (
          <Table 
            ignoreFunctionInColumnCompare={true}
            headerHeight={40} 
            estimatedRowHeight={60}
            fixed 
            data={data} 
            width={width} 
            height={height}
          >
            {defaultColumns.map(({ dataKey, ...restProps }) => (
              <Column key={dataKey} dataKey={dataKey} {...restProps} />
            ))}
          </Table>
        )}
      </AutoResizer>
    </>
  )
}

export default React.memo(FlowsTable)