Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Dropdown menu on paging does not work

See original GitHub issue

Hi, i don’t know what wrong with my code but the dropdown menu on paging does not show anything when i click, the other functions work well:

import boostrapTable from 'react-bootstrap-table/dist/react-bootstrap-table-all.min.css';
import React from 'react';
import { Grid } from 'react-mdl';
import { Col} from 'react-bootstrap';
import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table';
import Page from '../Page/PageComponent';

const userData = [];

export default class Program extends React.Component {
  static propTypes = {
    viewer: React.PropTypes.object.isRequired,
  };


  render() {
    function imageFormatter(cell, row) {
      if (cell) {
        return '<image src="' + cell + '" class="img-circle"/>';
      }
      return '<i style="height: 50px; width:50px; font-size: 50px" class="material-icons mdl-list__item-avatar">person</i>';
    }
    if (this.props.viewer != null) {
      return (
        <div>
          <Page heading='Users'>
            <Grid>
                {this.props.viewer.groups.map((group) => {
                  if (group.connections.length > 0) {
                    return group.connections.map((connection) => {
                      if (!connection.user) {
                        return ('');
                      }
                      userData.push(connection.user);
                    });
                  }
                })
              }
              <Col xs={12} sm={12} md={10} style={{ marginLeft: 50, marginRight: 50 }}>
                <BootstrapTable
                  data={userData}
                  hover={true}
                  pagination={true}
                  search={true}
                  exportCSV={true}>
                  <TableHeaderColumn dataField='connectionID' isKey={true} hidden={true} dataSort={true}>ID</TableHeaderColumn>
                  <TableHeaderColumn width='70px' dataField='photo' dataFormat={imageFormatter}>Photo</TableHeaderColumn>
                  <TableHeaderColumn dataField='name' dataSort={true}>Name</TableHeaderColumn>
                  <TableHeaderColumn dataField='roles' dataSort={true}>Roles</TableHeaderColumn>
                </BootstrapTable>
              </Col>
            </Grid>
          </Page>
        </div>
      );
    }
    return (
      <div>
        <Page heading='Users'>
          <h2>No Users</h2>
        </Page>
      </div>
    );
  }
}

I also got the same problem with issue#781, please fix the width of the table header to match table body. Thank you, your work is amazing