I go problem with sorting data in table because when I using sorter with render function sort work only time
{
title: 'App',
dataIndex: 'location',
render: location => location.join(', '),
sorter: true
}, {
title: 'Priority',
dataIndex: 'priority',
sorter: true
}
Sorter buttons in column dosen't change and i got the same data from table handle event function. I dont want write sorter function on frontend because i do this on backend
you can update antd-3.11.0 version
If you want to send api calls upon sorting, you will be using onChange function for this. Details can be found in the api of antd table.
Related
I created a React Table, to display fetched data on the Table. I use special function in accessor to display the data the way I wanted, but now I need to use the function which i have used in accessor, I need to use it in Cell, but for some reason when I use the same function in Cell, i receive different values than accessor.
Code with Accessor:
id: 'order',
Header: t('affiliateStats:table.orderNumber'),
accessor: Accessor.editButtonFormat(
orderEditModalForm,
'order.orderNumber',
{ hideWhenButtonTextBlank: true }
),
className: 'text-nowrap',
},
code with Cell:
id: 'order',
Header: t('affiliateStats:table.orderNumber'),
accessor: 'order.orderNumber',
className: 'text-nowrap',
Cell:editButtonFormatCell(
orderEditModalForm,
{ hideWhenButtonTextBlank: true}
)
},
I am using Ant Design V2.X and I cannot update to a newer version. I inherited code and I am struggling to sort the data according to certain column. It should be ordered once, and not sorted dynamically.
This is what I have within the return() function of my React component:
<Table size="small"
dataSource={this.props.Data}
rowKey={(record) => (record.LedgerId * 100 + record.PositionId).toString()}
pagination={false}
showHeader={true}
>
I was assuming the rowKey would order my data according to the arrow-function, but this is not the case. Can you all guide me how to solve this?
Background info
Within the component, I have the following declaration:
export interface ViewTableProps {
selectedEntity: number,
Data Interfaces.ViewEntry[],
}
and elsewhere
export interface ViewEntry {
//Id: number,
LedgerId: number,
PositionId: number,
Value: number,
children: ViewEntry[]
}
Related and not-so related posts
Antd table - sort dosen't work with render
Can't sort Column in Ant Design Table in Gatsby site
Sort an antd (Ant Design) table that has selection enabled
If you want to add actual sorters to your individual columns, you'd need to write sort functions in the sorter property of your column definitions. If you want to sort the entire dataset by default, you could sort the dataSource before passing it to the table.
Column sort from their docs:
{
title: 'Age',
dataIndex: 'age',
defaultSortOrder: 'descend',
sorter: (a, b) => a.age - b.age,
},
If you want a "default sort," you can just make a function to sort data outside the table;
const sortData = (data) => {
// Call slice to create a new Array and prevent mutating it if it's stored in state
return data.slice().sort((a, b) => a.myKey - b.myKey);
}
...
<Table size="small"
dataSource={sortData(this.props.Data)}
rowKey={(record) => (record.LedgerId * 100 + record.PositionId).toString()}
pagination={false}
showHeader={true}
>
If you would like to order dates, I recommend this:
import moment from 'moment';
and add
{
title: 'Date',
dataIndex: 'date',
key: "date",
sorter: (a, b) => moment(a.date).unix() - moment(b.date).unix()
},
I would like to call a custom function in "onFilter" property given by ant design on columns. I can go for the custom filter dropdown as an option but I would like to use the default filter option given by ant design. i.e
{
title: 'Address',
dataIndex: 'address',
key: 'address',
filters: [{
text: 'London',
value: 'London',
}, {
text: 'New York',
value: 'New York',
}],
onFilter: (value, record) => record.address.indexOf(value) === 0,
}
But the only thing I need to change here is a custom function (that will trigger the api call and set the new data in the redux state so the component will re render it self) something like
{
...
onFilter: (value, record) => this.getFilteredData(value),
}
But when I do this I get this error which does make sense too.
Warning: setState(…): Cannot update during an existing state
transition
So kindly guide me on how to do that as I am new to react and ant design both.
Dispatching an action inside onFilter is probably not a good idea because it will be called a couple of times on each filter change
But you can edit your reducer to set filterLoading to true when this action getFilteredData is called and the new onFilter can be like this
...
onFilter: (value) => {
if(! this.props.filterLoading) {
this.getFilteredData(value);
}
return true;
}
A couple of things to consider
You have to pass filterLoading to the component
Don't forget to set filterLoading to false on GET_FILTERED_DATA_SUCCESS action is called
Hope this helps
I got grid with columns:
...
columns: [
{
xtype: 'rownumberer'
}, {
xtype: 'checkcolumn',
sortable: false,
header: 'done',
dataIndex: 'status',
flex: 2,
width: 55,
callback: function(success, model) {
this.setRawValue(success); // DOESNT WORK
this.setValue(success); // DOESNT WORK
},
}
...
I would like to change checkbox state to checked or unchecked. Functions setValue() or setRawValue() have no effect for the checkbox - moreover - there are not available for
the widget.
Is there simple function like setChecked(boolean) in extjs for checkcolumn?
It is ridiculous I have instance 'checkcolumn' but I can't find basic function.
I will be glad for any hint. Thank you.
Bogus
for record in grid store with 'fieldName' checkcolumn write
record.set('fieldName',false)
or
record.set('fieldName',true)
it make field selected/deselected
the most simple way is to do it in the store , you can add a new boolean field in the store with default of true to do that , and later just change that boolean in the store and the grid will be reflected with the changes
Is there a working example available of an ext js ListFilter where the list options are loaded by a remote store. The documentation gives examples of harcoded options like 'Small', 'Medium' and 'large'.
I wish to load these options from a remote store. I found one example here but this modifes the core class ListFilter.js I am looking to avoid that.
http://www.sencha.com/forum/showthread.php?64234-Ext.ux.grid.filter.ListFilter-gt-loaded-store
Thanks,
Kaushik
Here is an example for a filter. The following code snippet would be used in the instantiation block for your filter plugin.
filters: [{
type: 'list',
dataIndex: 'dataInTheStoreName', // use this as the value
single: false, // true for radio buttons
labelField: 'dataInTheStoreLabel', // use this as the label
store: new yourExampleStore()
}.{...your other filters...}]
So just make an ExtJs store object to access your data, and attach it to the list filter.
There are many example of this such as here.
I've created a working fiddle that could be useful for you:
https://fiddle.sencha.com/#view/editor&fiddle/2gp6
Basically you declare the filter with a store (list filter needs boths: lavel and id)
text: 'Eye Color',
dataIndex: 'eyeColor',
filter: {
type: 'list',
store: filterStore,
idField: 'id',
labelField: 'value'
}