英文:
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).
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论