在blueprintjs表中创建排序
在blueprintjs表中创建排序
提问于 2020-08-07 21:21:30
我想使我的列按升序和降序排序。blueprintjs讨论了这是如何可能的，但对于如何实现它的步骤还不太清楚。我有一个以这种格式创建的表。我想要能够排序的数字上升和下降。我试图创建一个菜单和所有，但似乎没有解决我的问题。
class DataTable extends Component {
renderCell = (rowIndex, colIndex) => {
return (
<Cell>
{rowIndex}
</Cell>
);
};
render() {
const { data } = this.props;
const { length } = data;
return (
<Table numRows={length} numFrozenColumns={1}>
<Column name="Campaign" cellRenderer={this.renderCell} />
<Column name="Date Sent" cellRenderer={this.renderCell} />
</Table>
);
}
}回答 1
Stack Overflow用户
发布于 2021-12-12 12:14:55
这里有一个简单的例子。我希望这会有所帮助。
import { Column, ColumnHeaderCell, Table, Cell } from "@blueprintjs/table";
import { Menu, MenuItem } from "@blueprintjs/core";
export const SortableTable = () => {
const [items] = useState([
{ _id: 1, campaign: "L", email: "some1@test.com" },
{ _id: 2, campaign: "A", email: "some2@test.com" },
{ _id: 3, campaign: "V", email: "some3@test.com" }
]);
const cellRenderer = (rowIndex, type) => {
return <Cell>{items[rowIndex][type]}</Cell>;
};
const handleSortCampaignAsc = () => {
// todo sort asc
};
const handleSortCampaignDesc = () => {
// todo sort desc
};
const menuRenderer = (sortAsc, sortDesc) => (
<Menu>
<MenuItem icon="sort-asc" onClick={sortAsc} text="Sort Asc" />
<MenuItem icon="sort-desc" onClick={sortDesc} text="Sort Desc" />
</Menu>
);
const header = () => (
<ColumnHeaderCell
name="Campaign"
menuRenderer={menuRenderer(handleSortCampaignAsc, handleSortCampaignDesc)}
/>
);
return (
<Table numRows={items.length}>
<Column
columnHeaderCellRenderer={header}
cellRenderer={(rowIndex) => cellRenderer(rowIndex, "campaign")}
/>
<Column
name="Email"
cellRenderer={(rowIndex) => cellRenderer(rowIndex, "email")}
/>
</Table>
);
};不要忘记为图标添加依赖项。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/63309285
复制相关文章
相似问题
腾讯云开发者
