Version 10 breaking changes

This issue doesn’t imply that version 10 will be released any time soon. I just want a place to list some ideas so I won’t forget them.

• Remove AutoSizer in favor of react-measure (based on the Resize Observer spec, can be polyfilled). This seems like a more future-friendly way of detecting resize.
• Remove individual Table row-level event handler props in favor of an object (eg rowEventHandlers) that gets spread on each row. This will enable more flexible event event handling without requiring rowRenderer to be override while avoiding unsupported props warnings.
• Maybe split some of the HOCs (eg WindowScroller, InfiniteLoader) out into their own packages to reduce the clutter and bundle size for people wanting only windowing components? (This was suggested to me by a lib user. I haven’t put much thought into it. Would probably also need to go hand-in-hand with using something like Lerna.)
• Consider refactoring InfiniteLoader to be less row-centric (see #973)

[souporserious]

Just came across this. Was going to file an issue to see if you wanted to consider a ResizeObserver 😆 I’d be willing to help try and push this through. I would suggest using the polyfill direct. It’s a pretty small amount of code to get it setup. As far as measuring goes, we can attach the observer to the parent node if we need to.

[avocadowastaken]

Currently I’m using only Table component (didn’t have a chance to use other components) and got lot of custom editable columns like checkboxes, inputs and selects.

To make them reusable i’m using factories like that:

const createCheckboxColumn = props => (
  <Column
    width={56}
    minWidth={56}
    label={props.label}
    dataKey={props.dataKey}
    disableSort={true}
    style={{ minWidth: `${56}px` }}
    headerClassName={cx(props.headerClassName, classes.checkboxColumn)}
    headerRenderer={() => (
      <Checkbox
        disabled={!props.rowCount}
        value={props.allRowsSelected}
        onChange={value => props.onAllRowsSelect(value)}
      />
    )}
    className={cx(props.className, classes.checkboxColumn)}
    cellDataGetter={row => row.rowData}
    cellRenderer={row => (
      <Checkbox
        value={props.rowSelected(row)}
        onChange={selected => props.onRowSelect({ selected, ...row })}
      />
    )}
  />
);

const table = (
  <Table {...props}>
    {createCheckboxColumn(checkboxProps)}
  </Table>
);

Not sure if it’s even a good idea in case of perf, but It would be great to have an option to make it work in “react way”:

const table = (
  <Table {...props}>
    <CheckboxColumn {...checkboxProps} />
  </Table>
);