6

I following the example: demo, source code.

they set width={width} and height={height}, if I do that I get nothing displayed... To display somehthing I need to set the height to something, for exaple 600px, but I want to have this to 100% the height of the window.

How do I do that?

css

.AutoSizerWrapper {
  flex: 1 1 auto;
}

Here is my code.

  <div className="AutoSizerWrapper">
    <AutoSizer>
      {({ width, height }) => (
        <Table
          width={width}
          height={600}
          headerHeight={50}
          rowHeight={50}
          rowCount={this.props.list.length}
          rowGetter={({ index }) => this.props.list[index]}
        >
          <Column label="#" dataKey="_id" width={100} flexGrow={1} />
          <Column
            label="Part Number"
            dataKey="itemNumber"
            disableSort
            width={100}
            flexGrow={1}
          />
          <Column
            width={100}
            label="Part Name"
            dataKey="partName"
            disableSort
            flexGrow={1}
          />
          <Column
            width={100}
            label="Part Description"
            dataKey="partDescription"
            disableSort
            flexGrow={1}
          />
          <Column
            width={100}
            label="customs Tariff Number"
            dataKey="customsTariff"
            disableSort
            flexGrow={1}
          />
          <Column
            width={100}
            label="Net Weight (kg)"
            dataKey="netWeight"
            disableSort
            flexGrow={1}
          />
        </Table>
      )}
    </AutoSizer>
</div>
Isak La Fleur
  • 4,428
  • 7
  • 34
  • 50
  • 1
    `width={ "100%" }` does not work? – Rei Dien Sep 05 '17 at 13:21
  • The width is not a big problem.. as I use flex grow. The main issue is how I can inform the table to use the whole space below (vertical grow) – Isak La Fleur Sep 05 '17 at 13:40
  • sorry so use min-height for that. `style={{ minHeght: 100vh }}` – Rei Dien Sep 05 '17 at 13:42
  • 1
    @ReiDien, looks like this is a working solution. To get it to work for me I have to add style={{ minHeight "100vh" }} as prop in the component and also in the class AutoSizerWrapper -> min-height: 100vh
     – Isak La Fleur Sep 05 '17 at 13:56
  • Sorry @ReiDien. Looks like I only need to add it in the class. Thank you! – Isak La Fleur Sep 05 '17 at 14:04
  • 3
    The `AutoSizer` docs page mention a few tips that might be helpful (https://github.com/bvaughn/react-virtualized/blob/master/docs/usingAutoSizer.md). Essentially you need to make sure everything above the `AutoSizer` is not a 0-height (so html, body, whatever DOM element container you're mounting your app into). `AutoSizer` grows to fill its parent but if the parent is collapsed, it won't grow past a height of 0. – bvaughn Sep 05 '17 at 16:01

0 Answers0