React-table: [QUESTION] How can I make the table height responsive?

[cesalberca]

Hi! I'm loving this library!

I was wondering if I could set the height of the table to match the viewport height, so I have full height table. I'm guessing I would have to play with the value of ´defaultPageSize´ whenever the viewport changes. Any tips on how could I do that? Is there another way?

Thanks!

[tannerlinsley]

Try using this css:

.ReactTable {
  height: 100%; // or a pixel height
  display: flex;
  flex-direction: column;

  .rt-table {
    flex: 100000 0 auto; // or whatever ratio you want
  }

  .-pagination,
  .rt-body,
  .rt-tr-group,
  .rt-tr {
    flex: 1 0 auto;
  }
}

[tannerlinsley]

Does this work for you?

[cesalberca]

I ended up making the pagination fixed and letting the content of the page be determined by the number of rows the table has. It would be a cool feature to include two more options to make the pagination and the table header's fixed.

Here is the css to make the pagination fixed (Very simple):

.ReactTable .-pagination {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
}

[cesalberca]

I'm closing this as the question was solved. Thanks and cheers! ^^

[scottclayton]

@cesalberca
Something I've been playing with this week is making a responsive number of rows, and it's working fairly well.

<ReactTable
  data={data}
  columns={columns}
  page={data.length <= tablePageSize() ? 0 : undefined}     // fixes bug that displays no data if going down from page# ≥ 2 to a dataset that doesn't exceed one page
  className="-striped -highlight"
  minRows={data.length || 3}  // to give space to the "noDataText"
  pageSize={tablePageSize()}
  showPageJump={false}
  showPagination={data.length > tablePageSize()}
  showPageSizeOptions={false}
/>

tablePageSize is a function I import and use when needed:

const tablePageSize = () => Math.floor((window.innerHeight - 205) / 33)

205 in that case is the height (in pixels) of the contents of my page outside of the rows of the chart—the divs I want to always show, plus the header and the pagination of react-table—and 33 is the height in pixels of the rows in my react-table.

It works fairly well. I use the minRows and showPagination props to conditionally show the pagination only if there are more rows of data than will fit on the screen. It doesn't alter the number of rows upon dimension changes, but it does update the number of rows when it re-renders.

[cesalberca]

Very cool idea!

[scottclayton]

As a follow-up heads-up to this, I found the need to store window.innerHeight in my state management because of some weird bug that arose on Android devices running Chrome.