html-table - 在 blueprintjs 表中创建排序
问题描述
我想让我的列按升序和降序排序。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>
);
}
}
解决方案
这里有一个简单的例子。我希望它会有所帮助。
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>
);
};
PS不要忘记为图标添加依赖项。
推荐阅读
- graphql - GraphQLError:只能有一个名为的片段
- python - 无法访问熊猫
- python - 使用 BeautifulSoup 从具有不同类的多个跨度中提取文本
- html - HTML\CSS\style:隐藏一个 HTML 容器及其 HTML 子控件
- kotlin - Libgdx 自定义 Actor 未触发 clicked 和 touchDown 事件
- swift - NSPersistentCloudKitContainer 完成同步时如何获得通知?
- javascript - 无法在vue js中的@click方法上传递spring模型值
- imagemagick - 替换矩形区域中的颜色
- https - HTTPS GET 请求不适用于 sim7000e lte 模块
- sql - 20.000行的层次结构父子