question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

nz-table implement defaut automatic sort and filter

See original GitHub issue

What problem does this feature solve?

most sort and filter function are almost the same ,

What does the proposed API look like?

<th nzShowSort nzSortKey="name" /> will use the default sort function the defaut sort implement will be something like this

sort(e: { key: string, value: "ascend" | "descend" | null }) {
        if (e.value != null) {
            this.dataOriginal= this.data.filter(x => true); // copy the data
            this.data= this.dataOriginal.filter(x => true).sort((a, b) => e.value === "ascend" ? a[e.key] > b[e.key] ? 1 : -1  : a[e.key] < b[e.key]? 1:-1)
            
        }
        else {
            this.data= this.dataOriginal;
        }
    }

the same logic can be applied to the filter : [nzFilters] can be extract from the data property, compare function using js operator ==

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:8 (4 by maintainers)

github_iconTop GitHub Comments

1reaction
vthinkxiecommented, Aug 6, 2019

@John0King 用户自己排序只需要一行代码,增加API需要给每个事件都区分是前端处理还是后端处理,何况排序和筛选不同的用户有完全不同的需求,组件根本不会知道排序和筛选的key是什么,还需要增加筛选函数的输入。 这个函数,用户自己传进去和在事件发生的时候自己调用一下没有任何区别,组件帮用户处理排序等事件除了增加复杂度基本没有带来任何好处。

1reaction
John0Kingcommented, Aug 6, 2019

@vthinkxie 但是 tableInstance.data 相较于 [nzData] 已经是复制的数据,并且被截取了一部分处理。 我的意思是:

@Output()
nzSortChange = new EventEmiter<any>()

OnInit(){
  nzSortChange.subscribe((e)=>{
    if(this.nzSortChange.observers.length <= 1){ // when no other subscripbe
        this.currentSort = e;
       //handled in 
       // get data(){  return this.nzData.filter(x=>true).sort((a, b) => e.value === "ascend" ? a[e.key] > b[e.key] ? 1 : -1  : a[e.key] < b[e.key]? 1:-1) }
   }
})
}

或者添加一个属性,明确 是否让table组件自己去处理

这样,当用户自己订阅事件的时候, 可以跟自己的 [nzData] 去交互, table组件不再替用户去处理, 当用户自己不去处理的时候, sort 和 filter 交给table组件去处理, 而模板上还是跟以前一样,用 tableInstance.data 就好了

Read more comments on GitHub >

github_iconTop Results From Across the Web

nz-table set sorting/filtering programmatically #5304 - GitHub
To set a default sort order we'd have to add a new public property to the component (for each relevant column) and use...
Read more >
How can I set default sorter and filters on antd table ...
For default sort use defaultSortOrder . It can take ascend and descend as values. Share.
Read more >
Table | NG-ZORRO - Ant Design
A table displays rows of data. When To Use#. To display a collection of structured data. To sort, search, paginate and filter data....
Read more >
Sort data in a table - Microsoft Support
Sort the table. Select a cell within the data. Select Home > Sort & Filter. Sort&Filter. Or, select Data > Sort. DATA-Sort&Filter. Select...
Read more >
Table IMPORT MODULE - Ng Alain
st is not creating another table component, but use configurable rendering table on base of nz-table . this method can satisfy most scenes...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found