[英]Add column with a button which helps to route to a new page (when clicks) in material-table react
Currently, I'm working on a react based personal project using covid 19 API. There I'm using material-table to display countries as table records.目前,我正在使用 covid 19 API 进行基于反应的个人项目。我正在使用材料表将国家/地区显示为表记录。 I need to add a column with a button which helps to route to a new page when user clicks (Component which has relevant country details).
我需要添加一个带有按钮的列,该按钮有助于在用户单击时路由到新页面(具有相关国家/地区详细信息的组件)。 Any help really appreciated.
任何帮助真的很感激。
componentDidMount() {
axios
.get('API URL')
.then((res) => {
this.setState({
countries: res.data,
});
})
.catch((err) => {
console.log(err);
});
}
render() {
return (
<div>
<div className='c-overview-header' style={{ marginTop: 30 }}>
<div className='country-tbl' style={{ marginTop: 20, height: 20 }}>
<Container xs={12} md={8}>
<Row>
<Col>
<MaterialTable
columns={[
{
title: 'Flag',
field: 'flag',
filtering: false,
sorting: false,
render: (rowData) => (
<img
style={{ width: '50%', height: '50%' }}
src={rowData.countryInfo.flag}
alt={rowData.country}
/>
),
},
{ title: 'Country Name', field: 'country' },
{ title: 'Continent', field: 'continent' },
{ title: 'Total Cases', field: 'cases', type: 'numeric' },
{ title: 'Total Deaths', field: 'deaths', type: 'numeric' },
]}
data={this.state.countries}
options={{
filtering: true,
sorting: true,
actionsColumnIndex: -1,
}}
title=''
/>
</Col>
</Row>
</Container>
</div>
</div>
);
}
You can use action
prop as follows您可以按如下方式使用
action
道具
actions = {[
{
icon: 'info',
tooltip : 'anything you want to display when hover over',
onClick: (event) => window.location.href = '/path'
}
]}
You can use the actions prop, like this:您可以使用actions道具,如下所示:
<MaterialTable
title="Simple Action Preview"
columns={[
{ title: "Name", field: "name" },
{ title: "Infected", field: "infected" }
]}
data={[
{
name: "country1",
infected: 300
},
{
name: "country2",
infected: 100
}
]}
actions={[
{
icon: "info",
tooltip: "More info",
onClick: (event, rowData) => {
history.push(`/details/${rowData.name}`);
}
}
]}
/>
https://codesandbox.io/s/material-table-react-router-1hhre?file=/src/Table.jsx https://codesandbox.io/s/material-table-react-router-1hhre?file=/src/Table.jsx
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.