Data Grid

yarn add @twilio-paste/data-grid - or - yarn add @twilio-paste/core

import {
  DataGrid,
  DataGridHead,
  DataGridRow,
  DataGridHeader,
  DataGridBody,
  DataGridCell,
  DataGridFoot,
} from '@twilio-paste/core/data-grid';

const Component = () => (
  <DataGrid aria-label="User information table" striped>
    <DataGridHead>
      <DataGridRow>
        <DataGridHeader>First Name</DataGridHeader>
        <DataGridHeader>Last Name</DataGridHeader>
        <DataGridHeader>Country</DataGridHeader>
        <DataGridHeader>Email</DataGridHeader>
        <DataGridHeader>Phone</DataGridHeader>
      </DataGridRow>
    </DataGridHead>
    <DataGridBody>
      <DataGridRow>
        <DataGridCell>Devyn</DataGridCell>
        <DataGridCell>Weimann</DataGridCell>
        <DataGridCell>Congo</DataGridCell>
        <DataGridCell>Matilde86@gmail.com</DataGridCell>
        <DataGridCell>652-441-1766 x377</DataGridCell>
      </DataGridRow>
      <DataGridRow>
        <DataGridCell>Fritz</DataGridCell>
        <DataGridCell>Bashirian</DataGridCell>
        <DataGridCell>France</DataGridCell>
        <DataGridCell>Magali.Harber@hotmail.com</DataGridCell>
        <DataGridCell>1-229-278-7567</DataGridCell>
      </DataGridRow>
      <DataGridRow>
        <DataGridCell>Jovanny</DataGridCell>
        <DataGridCell>Mante</DataGridCell>
        <DataGridCell>Pitcairn Islands</DataGridCell>
        <DataGridCell>Fausto_Vandervort15@gmail.com</DataGridCell>
        <DataGridCell>(629) 375-5743 x726</DataGridCell>
      </DataGridRow>
    </DataGridBody>
    <DataGridFoot>
      <DataGridRow>
        <DataGridCell>Devyn</DataGridCell>
        <DataGridCell>Weimann</DataGridCell>
        <DataGridCell>Congo</DataGridCell>
        <DataGridCell>Matilde86@gmail.com</DataGridCell>
        <DataGridCell>652-441-1766 x377</DataGridCell>
      </DataGridRow>
    </DataGridFoot>
  </DataGrid>
);