table with selectRow activate, but with no data

[garciasa]

Hi guys, anybody know why the table displays in this way when it has not data?

Chrome (last version) and IE11

[AllenFang]

@garciasa, could you please give your code and describe your scenario? :)

[garciasa]

sure, that table is in tab :) (but it's not the default tab, so it's hidden), and I'm passing a datasource with no data... and yes, I'm doing the small hack for forceupdate when the tab is click. When datasource has data, it displays correctly.

[AllenFang]

HI @garciasa, it seem like be good, so anything is unusual? if not, I'll close this issue.

I'm doing the small hack for forceupdate when the tab is click.

that's right, you need to do it. But if u dont want a delay on show the data on the table, you can pre fetch the data when tab load firstly. if you data is small :)

[garciasa]

i made you an example http://pastebin.com/ssHERBQd

my datasource sometimes has data, other no, but when i don't have data, the header columns are disaligned... let me know if you know what i mean...

[AllenFang]

@garciasa, I follow you example and run on chrome48 and IE11 is ok.

According to your explanation, I want to know what's condition the unalign will appear,

1. if first load, the data is empty, I think the table will display well. (I've tested it)
2. Also, I write a example to prove when I switch to tab, whatever the data is become empty or become some data in table, no any unalign happen.

The following is case 2

/* eslint max-len: 0 */
import React from 'react';
import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table';
import { Tabs, Tab } from 'react-bootstrap';

const selectRowProp = {
  mode: 'radio'
};

export default class TableInTabs extends React.Component {

    constructor(props) {
      super(props);
      this.state = {
        key: 2,
        products: []
      };
    }

    handleTabChange = (key) => {
      let products = this.state.products;
      if (key === 1) {
        if (this.state.products.length === 0) {
          const startId = products.length;
          for (let i = 0; i < 5; i++) {
            const id = startId + i;
            products.push({
              id: id,
              name: 'Item name ' + id,
              price: 2100 + i
            });
          }
        } else {
          products = [];
        }
      }
      this.setState({
        key,
        products
      }, () => {
        /*
         * If you enable animation in react-bootstrap tab
         * please remember to call forceUpdate in async call.
         * If disable animation, call forceUpdate directly.
         */
        if (key === 1) {
          setTimeout(() => {
            this.refs.table1.forceUpdate();
          }, 500);
        }
      });
    }

    render() {
      return (
        <Tabs activeKey={ this.state.key } onSelect={ this.handleTabChange } animation>
          <Tab eventKey={ 1 } title='Tab 1'>
            <BootstrapTable ref='table1' data={ this.state.products } selectRow={ selectRowProp }>
              <TableHeaderColumn dataField='id' isKey dataSort>Product ID</TableHeaderColumn>
              <TableHeaderColumn dataField='name' width='300' dataSort>Product Name</TableHeaderColumn>
              <TableHeaderColumn dataField='price'>Product Price</TableHeaderColumn>
            </BootstrapTable>
          </Tab>
          <Tab eventKey={ 2 } title='Tab 2'>tab 2</Tab>
          <Tab eventKey={ 3 } title='Tab 3'>Tab 3 content</Tab>
        </Tabs>
      );
    }
}

[garciasa]

1. if first load, the data is empty, I think the table will display well. (I've tested it)

but you don´t see a "big" space between the first name column and the column the radio button should be, like in my first picture in my first post?? or maybe, is that the look??

[AllenFang]

my datasource sometimes has data, other no, but when i don't have data, the header columns are disaligned... let me know if you know what i mean...

but you don´t see a "big" space between the first name column and the column the radio button should be, like in my first picture in my first post?? or maybe, is that the look??

I think disaligned and a big space in column is a different thing...(check #331 to see what is unalign problem exactly) Anyway, I'll try to improve this condition(big space problem).

[garciasa]

Thanks mate!! you're right, it's not a disaligned, but it's more noticiable when you're a changing the tabs, and some of them has data, and others hasn't. But anyway thanks for the support...

[AllenFang]

@garciasa, I'm afraid of I can't improve this problem, because the column width on bootstrap table is still an issue I need to solve. So give you a workaround currently, just avoid to set selectRow when data is empty. Anyway, I'll try my best.

[garciasa]

No worries, that´s the workaround i have right now, return a table without selectRow, when i don´t have data, but it was for avoiding repeat code... but thanks anyway... Cheers.

[thepathleader]

Hi guys, anybody know why the table displays in this way when it has not data?

Chrome (last version) and IE11

[thepathleader]

Hi guys, use this table option parameter in "noDataText" and then use option BootstrapTable

    var tableOption = {
        page: 1,
        prePage: 'Prev', //Previous page button text
        nextPage: 'Next', //Next page button text
        noDataText: 'No data found with these selection'
    };

<BootstrapTable options={ tableOption } > </BootstrapTable>