How to set width and height to 100% with <AutoSizer>?

6k Views Asked by At

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>
0

There are 0 best solutions below