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

export const Test = () => (
  <DataTable
    onSelect={(selected, datum) => console.log({ selected, datum })}
    onClickRow="select"
    columns={[
      {
        property: 'name',
        header: <Text>Name</Text>,
        primary: true,
      },
      {
        property: 'percent',
        header: 'Complete',
        render: (datum) => (
          <Box pad={{ vertical: 'xsmall' }}>
            <Meter
              values={[{ value: datum.percent }]}
              thickness="small"
              size="small"
            />
          </Box>
        ),
      },
    ]}
    data={[
      { name: 'Alan', percent: 20 },
      { name: 'Bryan', percent: 30 },
      { name: 'Chris', percent: 40 },
      { name: 'Eric', percent: 80 },
    ]}
  />
);

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