SAP UI5 Web Component的React表格控件用法

从@ui5/webcomponents-react导入表格组件AnalyticalTable:

生成表格的抬头列标签数组和行数据数组:

<code>const tableData = new Array(500).fill(null).map((_, index) => { return { name: `name${index}`, age: Math.floor(Math.random() * 100), friend: { name: `friend.Name${index}`, age: Math.floor(Math.random() * 100) } };});const tableColumns = [ { Header: "Name", accessor: "name" // String-based value accessors! }, { Header: "Age", accessor: "age" }, { Header: "Friend Name", accessor: "friend.name" }, { Header: "Friend Age", accessor: "friend.age" }];/<code>


使用AnalyticalTable标签页,将data和columns属性分别绑定到之前创建的数据数组和抬头数组:

最后效果如图: