The representation of the bug
*cols*
| col 1 v | col 2 v | col 3 | col 4 v |
When you try to order any col that is ordered desc to asc the onSort method will return the other two colums
eg:
*click on col 1*
result:
{field:col 2, order: -1}
{field:col 4, order: -1}
Wish this helps to get where the error is, this is my table and colums code
Code: Select all
<DataTable
value={this.state.elements}
lazy
filterDisplay={this.state.dateColums ? "menu" : "row"}
responsiveLayout="scroll"
dataKey="id"
paginator
first={this.state.first}
rows={this.state.rows}
totalRecords={this.state.totalReadebleRecords}
onPage={this.onCustomPage}
onSort={(e) => {
this.onSort(e)
}
}
onFilter={(e) => {
this.onFilter(e)
}
}
loading={this.state.loading}
selection={this.state.selectedElements}
onSelectionChange={e => this.setState({selectedElements: e.value}, () => {
this.toast.show({
severity: 'info',
summary: 'Elementos seleccionados',
detail: this.state.selectedElements.length === 0 ? "Ninguno" : this.state.selectedElements.length,
life: 1500
});
})}
ref={(el) => {
this.dt = el;
}}
className="p-mt-6"
header={<DataTableHeaderComponent table={this.state.table} available={this.state.panelUserExist}
headerpanelComponents={headerpanelComponents}
exportComponents={exportComponents}/>}
rowHover
emptyMessage="No elements found."
currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries"
paginatorTemplate={templatePaginator}
selectionMode="multiple"
metaKeySelection={true}
dragSelection
scrollable
scrollDirection="both"
resizableColumns
columnResizeMode="expand"
showGridlines
sortMode="multiple"
reorderableColumns
onColReorder={e => this.onColReorder(e)}
filters={this.state.filters}
removableSort
onValueChange={data => this.setState({filteredData: data})}
editMode={this.state.editableTable ? "cell" : null}
size="small"
multiSortMeta={this.state.multiSortMeta}
sortField={this.state.sortField}
sortOrder={this.state.sortOrder}
>
{this.state.columns ? this.state.columns.map((item) => {
return (<Column
key={item.field}
field={item.field}
header={item.header}
body={
item.datatype === "date" || item.datatype === "datetime" || item.datatype === "time" ?
item.datatype === "date" ? this.dateTemplate : item.datatype === "datetime" ? this.dateTimeTemplate : this.timeTemplate
: item.datatype === "number" || item.datatype === "decimal" || item.datatype === "amount" ?
null : null
}
sortable
filter
filterType={item.datatype === "date" || item.datatype === "datetime" || item.datatype === "time" ? "date" :
item.datatype === "number" || item.datatype === "decimal" || item.datatype === "amount" ? "numeric" : "text"
}
filterPlaceholder={item.filterPlaceholder}
filterField={item.field}
sortField={item.field}
style={{width: item.header.length > 8 ? item.header.length + 1 + "rem" : item.header.length + 5 + "rem"}}
dataType={
item.datatype === "date" || item.datatype === "datetime" || item.datatype === "time" ?
item.datatype === "date" ? "date"
: item.datatype === "datetime" ? "date" : "date"
: item.datatype === "number" || item.datatype === "decimal" || item.datatype === "amount" ?
"numeric" : "text"
}
editor={this.state.editableTable ? (options) => this.cellEditor(options) : null}
onCellEditComplete={(e) => {
if (this.state.editableTable) {
let newData = this.onCellEditComplete(e);
let attribute = this.state.columns[this.state.selectedColumn];
let list = this.state.elements;
list[this.state.selectedRow][attribute] = newData;
this.setState({editing: false, actualDataType: "", elements: list});
}
}
}
/>);
}) : null}
</DataTable>