Checkboxes:

const checkboxes = [
  <Checkbox id="0-0"></Checkbox>,
  <Checkbox id="0-1" disabled/>,
  <Checkbox id="0-1" disabled checked/>,
  <Checkbox id="0-2" label="My checkbox label" />,
  <Checkbox id="0-3" label="My checkbox"  sublabel="Some text for the sublabel" />,
  <Checkbox id="0-4" label="Blue checkbox" sublabel="We can also style color"  checkboxColor="#2372e8" checkVariant="white"></Checkbox>,
];

// Generate test cases
const CheckboxesRow = ({backgroundColor, variant}) => {
  return (<tr
    style={{
      backgroundColor: `var(${backgroundColor})`,
      verticalAlign: 'center',
    }}
  >
    {checkboxes.map((checkbox, index) => <td key={index} style={{verticalAlign: 'top'}}>{React.cloneElement(checkbox, {variant})}</td>)}
  </tr>)
};
<table>
  <tbody>
  {[
    { backgroundColor: '#fff', variant: 'dark' },

  ].map((row, index) => <CheckboxesRow backgroundColor={row.backgroundColor} variant={row.variant} key={index} />)}
  </tbody>
</table>

const checkboxes = [
  <Checkbox id="1-0" />,
  <Checkbox id="1-1" disabled  />,
  <Checkbox id="1-1" disabled checked />,
  <Checkbox id="1-2" label="My checkbox label" />,
  <Checkbox id="1-3" label="My checkbox"  sublabel="Some text for the sublabel" />,
];
// Generate test cases
const CheckboxesRow = ({backgroundColor, variant}) => {
  return (<tr
    style={{
      backgroundColor: `${backgroundColor}`,
      verticalAlign: 'center',
    }}
  >
    {checkboxes.map((checkbox, index) => <td key={index} style={{verticalAlign: 'top'}}>{React.cloneElement(checkbox, {variant})}</td>)}
  </tr>)
};
<table>
  <tbody>
  {[
    { backgroundColor: '#1B4686', variant: 'light' },

  ].map((row, index) => <CheckboxesRow backgroundColor={row.backgroundColor} variant={row.variant} key={index} />)}
  </tbody>
</table>