react-table/examples/streaming-rows/src/App.js

import React from 'react'
import styled from 'styled-components'
import { useTable, useBlockLayout, useRowSelect } from 'react-table'

const Styles = styled.div`
  padding: 1rem;

  .table {
    display: inline-block;
    border-spacing: 0;
    border: 1px solid black;

    .tr {
      :last-child {
        .td {
          border-bottom: 0;
        }
      }
    }

    .th,
    .td {
      margin: 0;
      padding: 0.5rem;
      border-bottom: 1px solid black;
      border-right: 1px solid black;

      :last-child {
        border-right: 0;
      }
    }
  }
`

let sourceGridData = []
const updateRateMS = 16

function Table({ columns }) {
  // Use the state and functions returned from useTable to build your UI

  const [data, setData] = React.useState([])
  const timerRunning = React.useRef()

  if (!timerRunning.current) {
    timerRunning.current = true
    setInterval(() => {
      sourceGridData.push(makeRow(sourceGridData.length))
      let newData = [...sourceGridData]

      setData(newData)
    }, updateRateMS)
  }

  const defaultColumn = React.useMemo(
    () => ({
      width: 150,
    }),
    []
  )

  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    rows,
    toggleAllRowsSelected,
    prepareRow,
    state,
  } = useTable(
    {
      autoResetSelectedRows: false,
      columns,
      data,
      defaultColumn,
    },
    useBlockLayout,
    useRowSelect
  )

  // Render the UI for your table
  return (
    <>
      <div {...getTableProps()} className="table">
        <div className="thead">
          {headerGroups.map(headerGroup => (
            <div {...headerGroup.getHeaderGroupProps()} className="tr">
              {headerGroup.headers.map(column => (
                <div {...column.getHeaderProps()} className="th">
                  {column.render('Header')}
                </div>
              ))}
            </div>
          ))}
        </div>

        <div {...getTableBodyProps()}>
          {rows.slice(0, 10).map(row => {
            prepareRow(row)
            return (
              <div
                {...row.getRowProps({
                  style: {
                    backgroundColor: row.isSelected ? 'green' : '',
                  },
                  onClick: e => {
                    toggleAllRowsSelected(false)
                    row.toggleRowSelected()
                  },
                })}
                className="tr"
              >
                {row.cells.map(cell => {
                  return (
                    <div {...cell.getCellProps()} className="td">
                      {cell.render('Cell')}
                    </div>
                  )
                })}
              </div>
            )
          })}
        </div>
      </div>
      <pre>
        <code>{JSON.stringify(state, null, 2)}</code>
      </pre>
    </>
  )
}

function App() {
  const columns = React.useMemo(
    () => [
      {
        Header: 'ID',
        accessor: 'id',
      },
      {
        Header: 'Name',
        accessor: 'name',
      },
      {
        Header: 'age',
        accessor: 'age',
      },
      {
        Header: 'gender',
        accessor: 'gender',
      },
      {
        Header: 'height',
        accessor: 'height',
      },
      {
        Header: 'color',
        accessor: 'col',
      },
      {
        Header: 'dob',
        accessor: 'dob',
      },
    ],
    []
  )

  return (
    <Styles>
      <Table columns={columns} />
    </Styles>
  )
}

function makeRow(id) {
  let r = Math.floor(Math.random() * 3) + 1
  if (r === 0) {
    return {
      Id: id,
      name: 'Billy Bob',
      age: 12,
      gender: 'male',
      height: 95,
      col: 'red',
      dob: '14/05/2010',
    }
  } else if (r === 1) {
    return {
      Id: id,
      name: 'Jenny Jane',
      age: 42,
      gender: 'female',
      height: 142,
      col: 'blue',
      dob: '30/07/1954',
    }
  } else if (r === 2) {
    return {
      Id: id,
      name: 'Steve McAlistaire',
      age: 35,
      gender: 'male',
      height: 176,
      col: 'green',
      dob: '04/11/1982',
    }
  } else if (r === 3) {
    return {
      Id: id,
      name: 'Jeff Joe',
      age: 35,
      gender: 'male',
      height: 176,
      col: 'green',
      dob: '04/11/1982',
    }
  }
}
export default App