[Table] Multiple Tables In Same Component

[valinol]

Im testing the table and i have a few question:

1.- Can i use 2 tables in the same render? i want to select one element from the first table and another from the second table, but when i select from the second change the selected element from the first table and disappeared.

2.- I add the onRowSelection with a console.log, but this print the selected row four to five times.

This is part of the code
let Main = React.createClass({

childContextTypes: {
muiTheme: React.PropTypes.object
},

getChildContext() {
return {
muiTheme: ThemeManager.getCurrentTheme()
};
},

componentWillMount() {
ThemeManager.setPalette({
accent1Color: Colors.deepOrange500
});
},
_selecttablauno: function(e) {
console.log(e);
},
_selecttablados: function(e) {
console.log(e);
},

render() {

let containerStyle = {
  paddingTop: '0px'
};

let tableStyle = {
  width: '100%',
  overflow: 'auto'
};

let standardActions = [
  { text: 'Okay' }
];

// Row data
let rowData = [
{id: {content: '1'}, name: {content: 'John Smith but larger'}, status: {content: 'Employed'}, mas: {content: 'what if i use a long long long long'}},
{id: {content: '2'}, name: {content: 'Randal White'}, status: {content: 'Unemployed'}},
{id: {content: '3'}, name: {content: 'Stephanie Sanders'}, status: {content: 'Employed'}},
{id: {content: '4'}, name: {content: 'Steve Brown'}, status: {content: 'Employed'}},
{id: {content: '5'}, name: {content: 'Joyce Whitten'}, status: {content: 'Employed'}},
{id: {content: '6'}, name: {content: 'Samuel Roberts'}, status: {content: 'Unemployed'}},
{id: {content: '7'}, name: {content: 'Adam Moore'}, status: {content: 'Employed'}},
{id: {content: '8'}, name: {content: 'Robert Brown'}, status: {content: 'Employed'}},
{id: {content: '9'}, name: {content: 'Elizabeth Stevenson'}, status: {content: 'Employed'}},
{id: {content: '10'}, name: {content: 'Zachary Dobb'}, status: {content: 'Employed'}},
{id: {content: '11'}, name: {content: 'Zachary Dobb'}, status: {content: 'Employed'}}
];

// Row data
let rowData2 = [
{id: {content: '1'}, name: {content: 'John Smith but larger'}, status: {content: 'Employed'}, mas: {content: 'what if i use a long long long long'}},
{id: {content: '2'}, name: {content: 'Randal White'}, status: {content: 'Unemployed'}},
{id: {content: '3'}, name: {content: 'Stephanie Sanders'}, status: {content: 'Employed'}},
{id: {content: '4'}, name: {content: 'Steve Brown'}, status: {content: 'Employed'}},
{id: {content: '5'}, name: {content: 'Joyce Whitten'}, status: {content: 'Employed'}},
{id: {content: '6'}, name: {content: 'Samuel Roberts'}, status: {content: 'Unemployed'}},
{id: {content: '7'}, name: {content: 'Adam Moore'}, status: {content: 'Employed'}},
{id: {content: '8'}, name: {content: 'Robert Brown'}, status: {content: 'Employed'}},
{id: {content: '9'}, name: {content: 'Elizabeth Stevenson'}, status: {content: 'Employed'}},
{id: {content: '10'}, name: {content: 'Zachary Dobb'}, status: {content: 'Employed'}},
{id: {content: '11'}, name: {content: 'Zachary Dobb'}, status: {content: 'Employed'}}
];

// State
this.state = {
selectedItem:1,
fixedHeader: true,
fixedFooter: false,
stripedRows: false,
showRowHover: false,
selectable: true,
multiSelectable: false,
canSelectAll: false,
height: '300px',
rowData: rowData,
rowData2: rowData2
};

// Column configuration
let headerCols = {
id: {
content: 'ID',
tooltip: 'The ID'
},
name: {
content: 'Name',
tooltip: 'The name'
},
status: {
content: 'Status',
tooltip: 'The status'
},
otro: {
content: 'Two',
tooltip: 'The other'
},
mas: {
content: 'newa',
tooltip: 'The newa'
},
tres: {
content: 'four',
tooltip: 'The fourth'
}
};
let colOrder = ['id', 'name', 'status','otro','mas','tres'];
// Footer column content can also be specified as [ 'ID', 'Name', 'Status'].
let footerCols = {};

return (

  <div style={containerStyle}>
    <h2>example project</h2>

    <div style={tableStyle}>
      <Table 
        onRowSelection={this._selecttablauno}
        headerColumns={headerCols}
        footerColumns={footerCols}
        columnOrder={colOrder}
        rowData={this.state.rowData}
        height={this.state.height}
        fixedHeader={this.state.fixedHeader}
        fixedFooter={this.state.fixedFooter}
        stripedRows={this.state.stripedRows}
        showRowHover={this.state.showRowHover}
        selectable={this.state.selectable}
        multiSelectable={this.state.multiSelectable}
        canSelectAll={this.state.canSelectAll} />
      </div>
              <div style={tableStyle}>
      <Table 
        onRowSelection={this._selecttablauno}
        headerColumns={headerCols}
        footerColumns={footerCols}
        columnOrder={colOrder}
        rowData={this.state.rowData2}
        height={this.state.height}
        fixedHeader={this.state.fixedHeader}
        fixedFooter={this.state.fixedFooter}
        stripedRows={this.state.stripedRows}
        showRowHover={this.state.showRowHover}
        selectable={this.state.selectable}
        multiSelectable={this.state.multiSelectable}
        canSelectAll={this.state.canSelectAll} />
      </div>

  </div>
);

},

});

[jkruder]

@valinol You should be able to use two tables at the same time. I can't say for certain though -- not something I explicitly tested. I'll test that out and see if I can recreate what you're seeing.

In regards to multiple calls, we have a PR for that that needs some updating. See #954. If we don't get a response from @mkucharz in the next day or so I'll wrap up what he started.

[jkruder]

@valinol The issue with multiple tables has been resolved. You just need to set the deselectOnClickaway property to false.

[valinol]

thanks