REACT-ITERATIVE-TABLE

A simple react component to easily print data arrays to screen

Example of use:

import React from 'react';
import ReactDOM from 'react-dom/client';
import { Table, Col } from 'react-iterative-table';

const arr = [
  { id: 1, name: 'Zahrah Morin', color: 'Salmon pink' },
  { id: 2, name: 'Sania Russell', color: 'Quartz grey' },
  { id: 3, name: 'Yaqub Vaughan', color: 'Light blue' },
  { id: 4, name: 'Alasdair Andrew', color: 'May green' },
  { id: 5, name: 'Alexander Cervantes', color: 'Signal blue' },
  { id: 6, name: 'Leandro Clarkson', color: 'Cobalt blue' },
]

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);

root.render(
  <React.StrictMode>
    <Table it={arr.length} >
      <Col func={i => arr[i].id} >ID</Col>
      <Col func={i => arr[i].name} >Name</Col>
      <Col func={i => arr[i].color} >Color</Col>
    </Table>
  </React.StrictMode>
);

This piece of code shoud output the result below

ID	Name	Color
1	Zahrah Morin	Salmon pink
2	Sania Russell	Quartz grey
3	Yaqub Vaughan	Light blue
4	Alasdair Andrew	May green
5	Alexander Cervantes	Signal blue
6	Leandro Clarkson	Cobalt blue