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>[email protected]</td>
          </tr>
          <tr>
            <td>Mike</td>
            <td><b>[email protected]</b></td>
          </tr>
        </tbody>
      </table>
      <div ref={wrapperRef} />
    </>
  );
}

Result