how do you actually use this with fix data table?

Question

how do you actually use this with fix data table?

craigcosmo opened this issue 8 years ago · comments

given this code, how would you make the table responsive?

import React from 'react'
import {Table, Column, Cell} from 'fixed-data-table';
export default class Data extends React.Component {

    render() {
        return (
            <div style={{width:'100%'}}>
                <Table
                    rowHeight={50}
                    rowsCount={10}
                    width={600}
                    height={500}
                    headerHeight={30}>
                    <Column
                    header={<Cell>First Name</Cell>}
                    cell={<Cell>mama</Cell>}
                    fixed={true}
                    width={100}
                    />
                    <Column
                    header={<Cell>Sentence! (flexGrow greediness=2)</Cell>}
                    cell={<Cell>chacha</Cell>}
                    flexGrow={2}
                    width={200}
                    />
                    <Column
                    header={<Cell>Company (flexGrow greediness=1)</Cell>}
                    cell={<Cell>nana</Cell>}
                    flexGrow={1}
                    width={200}
                    />
                    <Column
                    width={100}
                    header={<Cell>Last Name</Cell>}
                    cell={<Cell>sasa</Cell>}
                    />
                </Table>
            </div>
        )
    }
}

Julien Delafontaine · Answer 1 · Sat Jul 16 2016 02:05:23 GMT+0800 (China Standard Time)

Since I was invited to in #1 , I'd suggest you use react-dimensions just as the example, making sure that the container of your table has a defined height/width before the component is mounted. If you use "%" height/width, make sure the parent has a defined size, a.s.o.

Gregor MacLennan · Answer 2 · Sat Jul 16 2016 03:17:00 GMT+0800 (China Standard Time)

Try something like this (I haven't tested this code). This component would need to be within a <div> that is already styled to have a width and height, e.g. 100% width and height. Check your layout without rendering this component first: Use the Chrome inspector to ensure that your CSS is creating a div that is the size you want, then this will fill that div with the table.

import React from 'react'
import {Table, Column, Cell} from 'fixed-data-table';
import Dimensions from 'react-dimensions';

class Data extends React.Component {
  render() {
    return (
      <Table
        rowHeight={50}
        rowsCount={10}
        width={this.props.containerWidth}
        height={this.props.containerHeight}
        headerHeight={30}>
        <Column
          header={<Cell>First Name</Cell>}
          cell={<Cell>mama</Cell>}
          fixed={true}
          width={100}
          />
        <Column
          header={<Cell>Sentence! (flexGrow greediness=2)</Cell>}
          cell={<Cell>chacha</Cell>}
          flexGrow={2}
          width={200}
          />
        <Column
          header={<Cell>Company (flexGrow greediness=1)</Cell>}
          cell={<Cell>nana</Cell>}
          flexGrow={1}
          width={200}
          />
        <Column
          width={100}
          header={<Cell>Last Name</Cell>}
          cell={<Cell>sasa</Cell>}
          />
      </Table>
    )
  }
}

export default Dimensions()(Data)

craigcosmo · Answer 3 · Mon Jul 18 2016 21:35:25 GMT+0800 (China Standard Time)

So here is all i got

file data.js

import React from 'react'
import {Table, Column, Cell} from 'fixed-data-table';
import Dimensions from 'react-dimensions';

class Data extends React.Component {
  render() {
    return (
      <Table
        rowHeight={50}
        rowsCount={10}
        width={this.props.containerWidth}
        height={this.props.containerHeight}
        headerHeight={30}>
        <Column
          header={<Cell>First Name</Cell>}
          cell={<Cell>mama</Cell>}
          fixed={true}
          width={100}
          />
        <Column
          header={<Cell>Sentence! (flexGrow greediness=2)</Cell>}
          cell={<Cell>chacha</Cell>}
          flexGrow={2}
          width={200}
          />
        <Column
          header={<Cell>Company (flexGrow greediness=1)</Cell>}
          cell={<Cell>nana</Cell>}
          flexGrow={1}
          width={200}
          />
        <Column
          width={100}
          header={<Cell>Last Name</Cell>}
          cell={<Cell>sasa</Cell>}
          />
      </Table>
    )
  }
}

export default Dimensions()(Data)

file home.js

import React from 'react'
import Data from 'Data'
export default class Home extends React.Component {
    render() {
        return (
            <div class="page">
                <div class="header"></div>
                <div class="content">
                    <Data />
                </div>
            </div>
        )
    }
}

Error: Wrapper div has no height or width, try overriding style with containerStyle option

Gregor MacLennan · Answer 4 · Mon Jul 18 2016 23:03:55 GMT+0800 (China Standard Time)

This is most likely because your CSS is wrong. react-dimensions passes the width and height of the container div to the props. If your container div has no height or width, you get 0. Read up on setting height: 100% in CSS and post anything useful here - lots of people get this problem and it would be good to have a reference. Quick check: remove the <Data /> component completely, set a background color on .content and take a look. If the div has no height, then no height can be passed down with react-dimentions.

    render() {
        return (
            <div class="page">
                <div class="header"></div>
                <div class="content" style={{backgroundColor: 'blue'}}>
                </div>
            </div>
        )
    }

craigcosmo · Answer 5 · Tue Jul 19 2016 02:19:40 GMT+0800 (China Standard Time)

I try, and here's the result

css

.page{
display:flex;
flex-direction: column;
}
.content{
flex:1
}

Julien Delafontaine · Answer 6 · Tue Jul 19 2016 02:26:45 GMT+0800 (China Standard Time)

I think that with flex designs you need to specify Dimensions(containerStyle={flex: 1})(Data). Maybe also elementResize: true ?

craigcosmo · Answer 7 · Tue Jul 19 2016 12:57:04 GMT+0800 (China Standard Time)

@jdelafon that will give error: Uncaught ReferenceError: containerStyle is not defined

Gregor MacLennan · Answer 8 · Tue Jul 19 2016 14:48:04 GMT+0800 (China Standard Time)

Dimensions({containerStyle: {flex: 1}})(Data)

craigcosmo · Answer 9 · Tue Jul 19 2016 16:22:37 GMT+0800 (China Standard Time)

Sorry about the mess above. I just want clarify what finally works. This code actually work. The table extends to width and height of the wrapper (.content). And the table resizes when window resize. However, react-dimension still gives warning Wrapper div has no height or width, try overriding style with containerStyle option

file data.js

import React from 'react'
import {Table, Column, Cell} from 'fixed-data-table';
import Dimensions from 'react-dimensions';

class Data extends React.Component {
  render() {
    return (
      <Table
        rowHeight={50}
        rowsCount={10}
        width={this.props.containerWidth}
        height={this.props.containerHeight}
        headerHeight={30}>
        <Column
          header={<Cell>First Name</Cell>}
          cell={<Cell>mama</Cell>}
          fixed={true}
          width={100}
          />
        <Column
          header={<Cell>Sentence! (flexGrow greediness=2)</Cell>}
          cell={<Cell>chacha</Cell>}
          flexGrow={2}
          width={200}
          />
        <Column
          header={<Cell>Company (flexGrow greediness=1)</Cell>}
          cell={<Cell>nana</Cell>}
          flexGrow={1}
          width={200}
          />
        <Column
          width={100}
          header={<Cell>Last Name</Cell>}
          cell={<Cell>sasa</Cell>}
          />
      </Table>
    )
  }
}

export default Dimensions()(Data)

file home.js

import React from 'react'
import Data from 'Data'
export default class Home extends React.Component {
    render() {
        return (
            <div class="page">
                <div class="header"></div>
                <div class="content">
                    <Data />
                </div>
            </div>
        )
    }
}

css

.page{
display:flex;
flex-direction: column;
}
.content{
flex:1
}