Open
Description
First of all thanks for a great component 👍 - am using it extensively.
Couple of issues that i have noticed
- I use dataFormat that returns a React Component. The rendering is fine but the sort does not work at all. If this is going to be fixed it will be good if there will be an option whether to sort on the unformatted or formatted date (similar to filterFormatted). (In my example, sort on "Name' column to see the issue)
- I use editable as a function to determine is a cell can be edited or not. When the editor is a cutom editor no disabling happens - we can still edit the cell. (In my example, click on the 'Product' cell to see the issue)
- When we have a custom editor, we are forced to have a focus function. Ideally this should be optional
- When a cell is made non-editable via the editable property (via a function) a click on the cell changes the cell and shows it as disabled - ideally it should not change at all. In my example click on the id cell and click on the 'Name' cell to see the difference - both are non-editable but what is visible changes) i.e. functionally there is no issue but it looks odd.
The code below can be used to highlight these issues
class SomeEditor extends React.Component {
focus(){
/* PROBLEM 3 : For a custom editor, I have to have a 'focus' function - IDEALLY THIS should be optional*/
}
render() {
return (
<input autoFocus type="text" />
)
}
}
const SomeFormatter = ({value}) => {
/* Problem 1- where there is a custom formatter - sort does not seem to work */
let valToShow = value.d == 1 ? 'ONE' : 'TWO';
return (
<div> {valToShow} </div>
);
};
function bsFormatter(cell, formatter) {
let Formatter = formatter;
return (
<Formatter value={cell} />
);
}
var data = [
{id : 1, date : {d : 1}, product : 'P1'},
{id : 2, date : {d : 2}, product : 'P2'},
];
const someEditor = (onUpdate, props) => (<SomeEditor onUpdate={ onUpdate } {...props}/>);
function editable(){
/* Problem 2: Even though false is always returned the custom editor is not disabled and we can edit */
console.log("Returning FALSE always");
return false;
}
class ProblemTable extends React.Component {
render() {
const cellEditProp = {
mode: 'click',
};
let customEditor = {getElement : someEditor};
let formatter = (cell, row) => bsFormatter(cell, SomeFormatter);
return (
<BootstrapTable cellEdit={ cellEditProp } filterFormatted striped hover data={ data }>
<TableHeaderColumn dataField='id' isKey>Product ID</TableHeaderColumn>
<TableHeaderColumn editable={editable} dataSort={true} dataFormat={formatter} dataField='date'> Name</TableHeaderColumn>
<TableHeaderColumn editable={editable} customEditor={ customEditor } dataSort={true} dataField='product'>Product</TableHeaderColumn>
</BootstrapTable>
);
}
}