英文:
How to apply search filter on table in IBM Carbon (Angular)?
问题
我是新手使用IBM碳设计系统。以下是来自IBM Carbon Angular文档的表格演示，表格组件的HTML代码如下：
<ibm-table-container><ibm-table-header><h4 ibmTableHeaderTitle>DASHBOARD</h4></ibm-table-header><ibm-table-toolbar [model]="model"><ibm-table-toolbar-content><ibm-table-toolbar-search [expandable]="true" placeholder="在仪表板中搜索"></ibm-table-toolbar-search></ibm-table-toolbar-content></ibm-table-toolbar><ibm-table [model]="model"></ibm-table><ibm-pagination [model]="model" (selectPage)="selectPage($event)"></ibm-pagination></ibm-table-container>
表格组件的TS文件如下：
this.model.header = [new TableHeaderItem({data: "Name"}), new TableHeaderItem({data: "Address"})];this.model.data = [[new TableItem({data: "Data1"}), new TableItem({data: "India"})],[new TableItem({data: "Data2"}), new TableItem({data: "USA"})],[new TableItem({data: "Data3"}), new TableItem({data: "Canada"})],[new TableItem({data: "Data5"}), new TableItem({data: "France"})],];
我参考的文档链接如下：
Storybook IBM Carbon table，Angular Carbon docs，github angular carbon design
请问是否有人可以为我展示一个表格搜索过滤器的实时示例，可能在stackblitz上？
英文:
I am new to IBM carbon design system
Below is table demo from IBM Carbon Angular documentation,
The table.component.html
<ibm-table-container><ibm-table-header><h4 ibmTableHeaderTitle>DASHBOARD</h4></ibm-table-header><ibm-table-toolbar [model]="model" ><ibm-table-toolbar-content><ibm-table-toolbar-search [expandable]="true"placeholder=" Search in Dashboard "></ibm-table-toolbar-search></ibm-table-toolbar-content></ibm-table-toolbar><ibm-table [model]="model" > </ibm-table><ibm-pagination [model]="model" (selectPage)="selectPage($event)"></ibm-pagination>
</ibm-table-container>
The table.component.ts file
this.model.header = [new TableHeaderItem({data: "Name"}), new TableHeaderItem({data: "Address" })];this.model.data = [[new TableItem({data: "Data1"}), new TableItem({data: "India"})],[new TableItem({data: "Data2"}), new TableItem({data: "USA"})],[new TableItem({data: "Data3"}), new TableItem({data: "Canada"})],[new TableItem({data: "Data5"}), new TableItem({data: "France"})],];
The documentation links that I am referring to:
Storybook IBM Carbon table , Angular Carbon docs , github angular carbon design
This is the screenshot of the table UI
can someone please show me a live example for search filter on table possibly on stackblitz ?
答案1
得分: 0
首先获取搜索值的更改：
<ibm-table-toolbar-search [expandable]="true" placeholder="在仪表板中搜索" (change)="searchValueChange($event.value)"></ibm-table-toolbar-search>
然后使用该值筛选数据：
searchValueChange(value: string) {this.model.data = this.model.data.filter((item) => item[0].data.includes(value) || item[1].data.includes(value));}
现在的问题是，当您更改搜索栏的值时，它会尝试从先前筛选的值中进行筛选。为了解决这个问题，您可以将初始数据存储在一个名为 initialData 的属性中，然后筛选 initialData 而不是 filteredData。如果您需要帮助，请在评论中告诉我。
英文:
Firstly get search value changes:
<ibm-table-toolbar-search [expandable]="true" placeholder="Search in Dashboard" (change)="searchValueChange($event.value)"></ibm-table-toolbar-search>
Then filter data with the value:
searchValueChange(value: string) {this.model.data = this.model.data.filter((item) => item[0].data.includes(e.value) || item[1].data.includes(e.value))}
Problem now is when you'll change the value of the searchbar it will try to filter from the previous filtered values. For fixing this you may store initial data into a initialData property and filtering initialData instead filteredData. (If you need help for that tell me in comments).
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论