0

React-virtualized is really a nice library. Just wondering whether it supports relative lengths in height/width property. Most of its examples are using just number pixels.

ReactDOM.render(
  <Table
    width={300}
    height={300}
    headerHeight={20}
    rowHeight={30}
    rowCount={list.length}
    rowGetter={({index}) => list[index]}>
    <Column label="Name" dataKey="name" width={100} />
    <Column width={200} label="Description" dataKey="description" />
  </Table>,
  document.getElementById('example'),

Link to CSS units Relative length units

ivenxu
  • 639
  • 4
  • 16
  • No it doesn't, you'll have to convert relative units yourself into pixels – Dominic Feb 25 '20 at 02:25
  • Thanks for the quick reply! It seems the Table in material-ui is also use pixel for column width. Any idea to do response layout for the columns? – ivenxu Feb 25 '20 at 03:23
  • 1
    You will need to observe the size of the component (author made a component called AutoSizer for this, or you can alternatively use ResizeObserver or a polyfill yourself). Also the author made a more lightweight version of virtualized called react-window FYI. Then you would need to take the width of the component and divy it up to the columns which you want to be relative https://stackoverflow.com/questions/58737641/calculate-fraction-as-value-relative-to-other-fractions – Dominic Feb 25 '20 at 03:32

0 Answers0