This is my DataTable code:
Code: Select all
<DataTable
ref={(el) => {
this.dt = el;
}}
value={this.state.elements}
className="p-mt-6"
header={header}
rows={this.state.rows}
dataKey="id"
rowHover
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: 1000
});
})}
filterDisplay={this.state.datecolums ? "menu" : "row"}
responsiveLayout="scroll"
emptyMessage="No elements found."
currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries"
paginator
paginatorTemplate={templatePaginator}
selectionMode="multiple"
metaKeySelection={true}
dragSelection
first={this.state.first}
onPage={this.onCustomPage}
scrollable
loading={this.state.loading}
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})}
>
{
this.state.columns.map((item) => {
if (item.datatype == "date" || item.datatype == "datetime") {
return (
<Column
key={item.field}
field={item.field}
header={item.header}
body={item.datatype == "date" ? this.dateTemplate : this.dateTimeTemplate}
sortable
filter
filterType="date"
filterPlaceholder={item.filterPlaceholder}
filterField={item.field}
sortField={item.field}
style={{width: item.header.length + 1 + "rem"}}
dataType="date"
filterElement={this.dateFilterTemplate}
/>
);
} else if (item.datatype == "number" || item.datatype == "decimal" || item.datatype == "amount") {
return (
<Column
key={item.field}
field={item.field}
header={item.header}
sortable
filter
filterType="numeric"
filterPlaceholder={item.filterPlaceholder}
filterField={item.field}
sortField={item.field}
dataType="numeric"
style={{width: item.header.length + 1 + "rem"}}
/>
);
} else {
return (
<Column
key={item.field}
field={item.field}
header={item.header}
sortable
filter
filterPlaceholder={item.filterPlaceholder}
filterField={item.field}
sortField={item.field}
filterType="text"
dataType="text"
style={{width: item.header.length + 1 + "rem"}}
/>
);
}
})
}
</DataTable>
Code: Select all
addFilter(columns) {
this.exportColumns = columns.map(col => ({title: col.header, dataKey: col.field}))
let jsonData = {};
columns.forEach(function (column) {
let columnName = column.field;
let columnData;
if (column.datatype == "date" || column.datatype == "datetime") {
columnData = {
operator: FilterOperator.AND,
constraints: [{value: null, matchMode: FilterMatchMode.DATE_IS}]
}
} else if (column.datatype == "number" || column.datatype == "decimal" || column.datatype == "amount") {
columnData = {
operator: FilterOperator.AND,
constraints: [{value: null, matchMode: FilterMatchMode.EQUALS}]
}
} else {
columnData = {
operator: FilterOperator.AND,
constraints: [{value: null, matchMode: FilterMatchMode.CONTAINS}]
}
}
jsonData[columnName] = columnData;
})
jsonData['global'] = {value: null, matchMode: FilterMatchMode.CONTAINS}
return jsonData;
}