ResponsiveTabs.js

import React from 'react';
import {  Tab, Tabs, DataTable, Text, Anchor } from "grommet";
import {  Grommet } from "grommet";
import { hp } from 'grommet-theme-hp';
var validUrl = require('url-validation');

const cleanupText = (text) => {

  let wordsArray = text.toLowerCase().split('-').join(' ').split('_').join(' ').split(' ')
  let formattedWord = wordsArray.map((word, i) => {
      if (word === 'id') {
        return 'ID'
      } else if(word === 'num') {
        return '#'
      } else {
        return word.charAt(0).toUpperCase() + word.slice(1) + (i === word.length-1 ? '' : ' ')
      }
    })
  return formattedWord
}
const alignMultiline = (top, bot) => {
  top = '' + top
  bot = '' + bot
  const whiteSpaceCount = Math.round(Math.abs(top.length - bot.length) / 2)
  const whiteSpace = ' '.repeat(whiteSpaceCount)
  if (top.length > bot.length) {
    return `${top}\n${whiteSpace}${bot}`
  } else {
    return `${whiteSpace}${top}\n${bot}`
  }
}


export default function ResponsiveTabs({ data }) {

  if (!data.labels || !data.rawData || !data.labels.length || !data.rawData.length ) return null
  
  const tabs = data.labels.map( (label, i) => (
    
    <Tab pad='xsmall' alignSelf='center' style={{ whiteSpace: 'pre-wrap', wordBreak: 'break-all' }} title={alignMultiline(data.rawData[i].length,label)} key={`${label}-${i}-${data.slug}`}margin={ {'top': 'medium', 'bottom': 'medium'} }>

          <DataTable
            overflow={{ horizontal: 'scroll' }}
            columns={data.columns.map((property) => {
                return {
                  property: property,
                  header: <Text>{cleanupText(property)}</Text>,
                  align: 'start',
                  primary: (property === 'num'),
                  search: true,
                  sortable: true,
                  render: datum => { return(
                    validUrl(datum[property]) ?
                    <Anchor href={datum[property]} target="_blank">  
                      <Text size={'small'} pad={'xsmall'} margin={'sxmall'} wordBreak={'break-word'}>
                          {datum[property]}
                        </Text>
                    </Anchor>
                    :<Text size={'small'} pad={'xsmall'} margin={'sxmall'} wordBreak={'break-word'}>
                        {datum[property]}
                      </Text>
                  )}
                }
              })
            }
          data={ data.rawData[i] }
          size='large'
          sortable
          ></DataTable>

    </Tab>
    )
  )

  return (
    <Grommet theme={hp}>
      <Tabs
        justify='center'
        alignSelf='end'
        flex
        responsive={true}
        margin='medium'
      >
        {tabs}
      </Tabs>
    </Grommet>
  )
}