WindowTable

Let's go through all the props accepted by the WindowTable component.

Note: In addition to the props documented here, all basic props such as className, style, key and all the props from the react-window itself can be supplied.

NOTE: If you override any of the components you must define that component outside of the render function. Otherwise state updates will make the active element lose focus.

data: Array

This should be an array of objects(key-value pairs); each object representing a single row of the table. The key will be picked up by the columns prop, to render the value of each pair.

Example data:

const data = [
  {name: 'Naruto', age: 24, clan: 'Uzomaki'},
  {name: 'Hinata', age: 22, clan: 'Huga'},
  {name: 'Itachi', age: 28, clan: 'Uchiha'},
  //...and thousands or millions of data
];

This should be an array of objects as described below. The number of objects in the array will be the number of columns rendered by the table, and the order they are rendered. This also means, that the number of columns rendered by the table are somewhat independent of the format of the data supplied. It is this prop that controls it.

Each object in the columns array can have the following attributes.

`key`: String

This maps an item in a data row to a column.

Suppose we feed the table with the example data from the data prop section above.

Now, if we have a column object with the key name, it will render the names, "Naruto", "Hinata" and "Itachi" in three rows.

const columns = [
  {key: 'name', /*...more attributes*/},
  // ... more columns
];

Note: If the key does not match a value in the data, it will render nothing by default. However, you can pass a custom Component to render something useful based on the column and row. See the Component attribute for more details.

`width`: Number

The pixel value of this value will be used as the base width of the column.

However, the actual column widths grow if the table width is greater than the total column width.

For example, if we have 3 columns, each specified as width: 100, and the table width is 450 pixels, the extra 150 pixels will be divided among the three columns, making them 150 pixels each.

This behavior is achieved by setting the flex-grow property internally.

`title`: String

This is the column title. Header cells can be customized using the HeaderCell attribute.

`Component`: React.Component

You can customize the column cells by supplying a custom React Component for this attribute. The component can accept 4 props: children, column, row and index.

children: A single data unit from the data array. Can be derived from the row and column as row[column.key]
column: The column itself
row: A data row from the data array
index: Index of the row being rendered

const columns = [
  {key: 'ability', width: 100, Component: AbilityRenderer}
];
const AbilityRenderer = props => {
  const {children, row, column} = props;
  return (
    <div>
      {/*Something based on children, row and column*/}
    </div>
  );
}

`HeaderCell`: React.Component

Similar to the Component above, the HeaderCell attribute can be used to customize the header cells. The component supplied to this attribute can accept two props: children and column.

children: The value of the title attribute in the column metadata
column: The column itself

Height: Number | Width: Number

We measure the dimensions of the table based on the parent container and the styles applied on the table itself. However, you can also supply explicit values for the width and height attributes.

This will result in the table not having to measure, giving a performance boost. However, it will stop the table from adjusting its content based on the window size or window resize events.

variableSizeRows: Boolean

Pass true to enable variable sized rows. i.e. the row height is determined by the cell contents.

rowHeight: Number|Function

Similar to how we can supply explicit values for the table width and height, we can also supply an explicit value for a rowHeight.

We can also supply a function which accepts the row index of the data array that's being rendered. This can be useful for changing the row height based on each row content. Nonetheless, how you measure the height based on the content can be tricky.

classNamePrefix: String

All important elements will be given a className by the window-table. These classes can be used for styling the table with CSS.

However, there can be cases where some other library, or component has the same classes. In such cases, you can supply a prefix string, which will be prepended to all the classNames used by window-table.

rowClassName: String | Function

When a string is provided, it will be concatenated with the classNamePrefix and will be applied to the table rows.

When a Function is provided, it will be called with the index of the row that is being rendered. The return value of that function should be a string, which will be applied to the tableRows as the className, concatenated with the classNamePrefix.

For instance, imagine we want to have different classNames for odd and even rows:

<WindowTable
  data={data}
  columns={columns}
  rowClassName={index => index % 2 === 0 ? 'even-row' : 'odd-row'}
/>

overscanCount: Number

This is the same overscanCount prop from react-window, serving the same purpose.

disableHeader: Boolean

Do not render the table header (only the rows).

debounceWait: Number

Window Table internally uses a measurer to measure the optimal table and cell dimensions. In rare cases, this may cause react to re-render indefinitely until the app crashes.

To prevent such scenarios, and to debug in such cases, a number can be passed to the debounceWait to examine how the dimensions change over time.

Cell: React.Component

By default, each table cell will be rendered using a div. You can change this behavior by supplying a custom React Component or a primitive like td.

Internally, two props; className and style are passed to the component you provide for this prop. Therefor, if you are passing a custom component, remember to merge these props as appropriate.

For example,

const CustomCell = props => {
  return (
    <Td
      {...props /*Pass all the props*/}
      className={props.className + ' another_className'}
      style={{
        ...props.style, // Merge with the original styles
        background: '#F80'
      }}
    />
  );
}
<WindowTable
  data={data}
  columns={columns}
  Cell={CustomCell}
/>

HeaderCell: React.Component

Same as Cell, but for the Header Cells. Think of it as a th primitive.

Table: React.Component

Same as Cell, but for the Table. Think of it as a table primitive.

Header: React.Component

Same as Cell, but for the Table Header. Think of it as a thead primitive.

HeaderRow: React.Component

Same as Cell, but for the Header Row. Think of it as a tr primitive, nested inside a thead.

Body: React.Component

Same as Cell, but for the Table Body. Think of it as a tbody primitive.

Row: React.Component

Same as Cell, but for the Table Rows. Think of it as a tr primitive, nested inside a tbody.

However, in addition to the style and className props, Row will be passed the index of the table row being rendered, and the row data itself.

function CustomRow({index, row, ...rest}) {
  // index -> one of 0, 1, 2, 3, ...
  // row -> corresponding data row. eg: { id: 2, name: 'Naruto', ...}
  return <tr {...rest} />
}

headerCellInnerElementType: string

Note: The default value of 'div' is automatically changed to 'th' when using the HTML5Table

WindowTable internally uses a measurer to derive table width, height and row height. When passing custom components to a table, the measurer being of type 'div' can cause HTML standard violations. To work around the problem, you must pass this prop to be the same type as the HeaderCell.

const CustomHeaderCell = props => {
  return (
    <th {/* Custom props and whatnot */}>
      <span>
        {props.children} {/* A span inside Header Cell because why not */}
      </span>
    </th>
  );
}
<WindowTable
  data={data}
  columns={columns}
  HeaderCell={CustomHeaderCell}
  headerCellInnerElementType="th"
/>

Note that the headerCellInnerElementType should only specify the primitive element type. Not the custom cell itself.