您需要在列数组中添加field
和键入。label
请用这个替换列数组
const columns = [
{ label: "Drug", field: "drug" },
{ label: "Molecule", field: "molecule" },
{ label: "prediction", field: "prediction" }
];
工作代码
import React from "react";
import styled from "styled-components";
import { useTable, useSortBy, useFilters } from "react-table";
import { MDBDataTable } from "mdbreact";
const Styles = styled.div`
padding: 1rem;
table {
font-family: Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 100%;
}
table td,
table th {
border: 1px solid #ddd;
padding: 8px;
}
table tr:nth-child(even) {
background-color: #f2f2f2;
}
table tr:hover {
background-color: #ddd;
}
table th {
padding-top: 12px;
padding-bottom: 12px;
text-align: center;
background-color: #04aa6d;
color: white;
}
`;
function Table({ columns, data }) {
const {
getTableProps,
getTableBodyProps,
headerGroups,
rows,
prepareRow
} = useTable({
columns,
data
});
// Render the UI for your table
return (
<table {...getTableProps()}>
<thead>
{headerGroups.map((headerGroup) => (
<tr {...headerGroup.getHeaderGroupProps()}>
{headerGroup.headers.map((column) => (
<th {...column.getHeaderProps()}>{column.render("Header")}</th>
))}
</tr>
))}
</thead>
<tbody {...getTableBodyProps()}>
{rows.map((row, i) => {
prepareRow(row);
return (
<tr {...row.getRowProps()}>
{row.cells.map((cell) => {
return <td {...cell.getCellProps()}>{cell.render("Cell")}</td>;
})}
</tr>
);
})}
</tbody>
</table>
);
}
function App() {
const columns = [
{ label: "Drug", field: "drug", width: 550 },
{ label: "Molecule", field: "molecule" },
{ label: "prediction", field: "prediction" }
];
const data = {
result: {
DB04571: { "CC1=CC2=CC3=C(OC(=O)C=C3C)C(C)=C2O1": -4.204354286193848 },
DB00460: {
"COC(=O)CCC1=C2NC(\\C=C3/N=C(/C=C4\\N\\C(=C/C5=N/C(=C\\2)/C(CCC(O)=O)=C5C)C(C=C)=C4C)C2=CC=C([C@@H](C(=O)OC)[C@@]32C)C(=O)OC)=C1C": -6.578990459442139
},
DB00855: { "NCC(=O)CCC(O)=O": -3.666782855987549 },
DB09536: { "O=[Ti]=O": -3.1173954010009766 },
DB01600: { "CC(C(O)=O)C1=CC=C(S1)C(=O)C1=CC=CC=C1": -4.327569961547852 },
DB09000: {
"CC(CN(C)C)CN1C2=CC=CC=C2SC2=C1C=C(C=C2)C#N": -4.615994930267334
}
}
};
const normalizeData = (data) =>
Object.keys(data).map((key) => ({
drug: key,
molecule: Object.keys(data[key])[0],
prediction: Object.values(data[key])[0]
}));
const data_two = {
columns: columns,
rows: normalizeData(data.result)
};
return (
<Styles>
{/* <Table columns={columns} data={normalizeData(data.result)} /> */}
<MDBDataTable striped bordered small data={data_two} />
</Styles>
);
}
export default App;