From HTML Table

In this examples, we load the data from an existing HTML table

Live Editor

function () { const tableRef = useRef(null); const wrapperRef = useRef(null); useEffect(() => { const grid = new Grid({ from: tableRef.current, }).render(wrapperRef.current); }); return ( <> <table ref={tableRef}> <thead> <tr> <th>Name</th> <th>Email</th> </tr> </thead> <tbody> <tr> <td>John</td> <td>john@example.com</td> </tr> <tr> <td>Mike</td> <td><b>mike@example.com</b></td> </tr> </tbody> </table> <div ref={wrapperRef} /> </> ); }

function () {
  const tableRef = useRef(null);
  const wrapperRef = useRef(null);
  
  useEffect(() => {
    const grid = new Grid({
      from: tableRef.current,
    }).render(wrapperRef.current);
  });
  
  return (
    <>
      <table ref={tableRef}>
        <thead>
          <tr>
            <th>Name</th>
            <th>Email</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>John</td>
            <td>john@example.com</td>
          </tr>
          <tr>
            <td>Mike</td>
            <td><b>mike@example.com</b></td>
          </tr>
        </tbody>
      </table>
      <div ref={wrapperRef} />
    </>
  );
}

Result

Loading...