@media all and (min--moz-device-pixel-ratio: 0) {
    table-layout: fixed;
  }

import React from 'react';

import { Box, DataTable, Text, Meter } from 'grommet';

const amountFormatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  minimumFractionDigits: 2,
});

const columns = [
  {
    property: 'name',
    header: <Text>Name with extra</Text>,
    primary: true,
    footer: 'Total',
  },
  {
    property: 'location',
    header: 'Location',
    // size: 'small',
    render: ({ location }) => <Text truncate>{location}</Text>,
  },
  {
    property: 'date',
    header: 'Date',
    render: (datum) => <Text truncate>{datum.date}</Text>,
    align: 'end',
  },
  {
    property: 'percent',
    header: 'Percent Complete',
    render: ({ percent }) => (
      <Box pad={{ vertical: 'xsmall' }}>
        <Meter values={[{ value: percent }]} thickness="small" size="small" />
      </Box>
    ),
  },
  {
    property: 'paid',
    header: 'Paid',
    render: (datum) => amountFormatter.format(datum.paid / 100),
    align: 'end',
    aggregate: 'sum',
    footer: { aggregate: true },
  },
];

const groupColumns = [...columns];
const first = groupColumns[0];
groupColumns[0] = { ...groupColumns[1] };
groupColumns[1] = { ...first };
groupColumns[0].footer = groupColumns[1].footer;
delete groupColumns[1].footer;

const DATA = [
  {
    name: 'Alan',
    location: '',
    date: '',
    percent: 0,
    paid: 0,
  },
  {
    name: 'Bryan',
    location: 'Fort Collins long long long long',
    date: '2018-06-10',
    percent: 30,
    paid: 1234,
  },
  {
    name: 'Chris',
    location: 'Palo Alto',
    date: '2018-06-09',
    percent: 40,
    paid: 2345,
  },
  {
    name: 'Eric',
    location: 'Palo Alto',
    date: '2018-06-11 really really really long',
    percent: 80,
    paid: 3456,
  },
  {
    name: 'Doug',
    location: 'Fort Collins',
    date: '2018-06-10',
    percent: 60,
    paid: 1234,
  },
  {
    name: 'Jet',
    location: 'Palo Alto',
    date: '2018-06-09',
    percent: 40,
    paid: 3456,
  },
  {
    name: 'Michael',
    location: 'Boise',
    date: '2018-06-11',
    percent: 50,
    paid: 1234,
  },
  {
    name: 'Tracy',
    location: 'San Francisco',
    date: '2018-06-10',
    percent: 10,
    paid: 2345,
  },
];

export const Simple = () => (
  // Uncomment <Grommet> lines when using outside of storybook
  // <Grommet theme={grommet}>
  <Box height="medium" width="600px" overflow="auto">
    <DataTable columns={groupColumns} data={DATA} />
  </Box>
  // </Grommet>
);

export default {
  title: 'Visualizations/DataTable/Simple',
};

  @media all and (min--moz-device-pixel-ratio: 0) {
    table-layout: fixed;
  }

   <Box width="small" border>
      <Table caption="Simple Table">
        <TableBody>
          <TableRow>
            <TableCell>
              <Meter
                type="bar"
                values={[
                  {
                    value: 60
                  }
                ]}
              />
            </TableCell>
            <TableCell>
              <Text>Text</Text>
            </TableCell>
          </TableRow>
        </TableBody>
      </Table>
    </Box>

    display: table;
    width: 100%;
    table-layout: fixed;