HTML5Table

The HTML5Table component has the exact same props as the WindowTable component.

The main difference is that, here, we have overriden the wrapping components.

Let's look at some code to understand what that means...

const Html5TableExample = props => {
  return (
    <WindowTable
      className="table"
      Cell="td"
      HeaderCell="th"
      Header='thead'
      HeaderRow="tr"
      Row="tr"
      Body="tbody"
      Table="table"
      {...props}
    />
  );
};

In addition to that, the Html5Table component accepts an additional prop: headerClassName. This is convenient for cases where the thead components need special class names.

eg:

<Html5Table
    data={data}
    columns={columns}
    className="table-sm table-striped"
    headerClassName="thead-dark"
/>

of course, this could have been done by overriding the Header by yourself.

<Html5Table
    data={data}
    columns={columns}
    className="table-sm table-striped"
    Header={function THead(props) {
      return <thead {...props} className="thead-dark" />
    }}
/>