mirror of
https://github.com/Chia-Network/chia-blockchain.git
synced 2024-09-11 10:56:14 +03:00
Add first version of the new Table component
This commit is contained in:
parent
26d34df7a0
commit
026cd613ba
23
electron-react/src/components/table/Readme.md
Normal file
23
electron-react/src/components/table/Readme.md
Normal file
@ -0,0 +1,23 @@
|
||||
Single-Row Table:
|
||||
|
||||
```jsx
|
||||
<Table
|
||||
header={["Total Chia Farmed", "XCH Farming Rewards", "XCH Feed Collected", "Last Height Farmed"]}
|
||||
data={[10, 5120, "31.20", 2029]}
|
||||
/>
|
||||
```
|
||||
|
||||
Multi-Row Table:
|
||||
|
||||
```jsx
|
||||
<Table
|
||||
header={["Challenge Hash", "Height", "Number of Proofs", "Best Estimate"]}
|
||||
data={[
|
||||
["Oxa6582dba...", 2029, 0, "309536343 seconds"],
|
||||
["Oxa6582dba...", 2029, 0, ""],
|
||||
["Oxa6582dba...", 2029, 0, ""],
|
||||
["Oxa6582dba...", 2029, 0, ""],
|
||||
["Oxa6582dba...", 2029, 0, ""],
|
||||
]}
|
||||
/>
|
||||
```
|
94
electron-react/src/components/table/Table.js
Normal file
94
electron-react/src/components/table/Table.js
Normal file
@ -0,0 +1,94 @@
|
||||
import React from "react";
|
||||
import { withStyles, makeStyles } from "@material-ui/core/styles";
|
||||
import MUITable from "@material-ui/core/Table";
|
||||
import TableContainer from "@material-ui/core/TableContainer";
|
||||
import TableHead from "@material-ui/core/TableHead";
|
||||
import TableBody from "@material-ui/core/TableBody";
|
||||
import TableRow from "@material-ui/core/TableRow";
|
||||
import TableCell from "@material-ui/core/TableCell";
|
||||
import Paper from "@material-ui/core/Paper";
|
||||
|
||||
const StyledTableCell = withStyles((theme) => ({
|
||||
head: {
|
||||
backgroundColor: theme.palette.grey[200],
|
||||
padding: "20px",
|
||||
|
||||
fontWeight: 500,
|
||||
fontSize: "24px",
|
||||
lineHeight: "28px",
|
||||
letterSpacing: "0.685741px",
|
||||
|
||||
color: "#111111",
|
||||
whiteSpace: "nowrap",
|
||||
},
|
||||
body: {
|
||||
fontWeight: "normal",
|
||||
fontSize: "22px",
|
||||
lineHeight: "26px",
|
||||
textAlign: "center",
|
||||
letterSpacing: "0.575px",
|
||||
|
||||
color: "#66666B",
|
||||
},
|
||||
}))(TableCell);
|
||||
|
||||
export const SingleRowTableCell = withStyles((theme) => ({
|
||||
root: {
|
||||
border: "1px solid",
|
||||
borderColor: theme.palette.grey[200],
|
||||
},
|
||||
}))(StyledTableCell);
|
||||
|
||||
export const StyledTableRow = withStyles((theme) => ({
|
||||
root: {
|
||||
"&:nth-of-type(even)": {
|
||||
backgroundColor: "#FAFAFA",
|
||||
},
|
||||
},
|
||||
}))(TableRow);
|
||||
|
||||
const useStyles = makeStyles({
|
||||
table: {
|
||||
minWidth: 700,
|
||||
},
|
||||
});
|
||||
|
||||
/**
|
||||
* General table component to display data in a tabular way.
|
||||
*/
|
||||
export default function Table(props) {
|
||||
const { header, data } = props; // TODO prop checking
|
||||
|
||||
const isSingleRow = !Array.isArray(data[0]);
|
||||
|
||||
const rowData = isSingleRow ? [data] : data;
|
||||
|
||||
const TableCellComp = isSingleRow ? SingleRowTableCell : StyledTableCell;
|
||||
|
||||
const classes = useStyles();
|
||||
|
||||
return (
|
||||
<TableContainer component={Paper}>
|
||||
<MUITable className={classes.table}>
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
{header.map((h) => (
|
||||
<StyledTableCell key={h} align="center">
|
||||
{h}
|
||||
</StyledTableCell>
|
||||
))}
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{rowData.map((row) => (
|
||||
<StyledTableRow>
|
||||
{row.map((entry) => (
|
||||
<TableCellComp align="center">{entry}</TableCellComp>
|
||||
))}
|
||||
</StyledTableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</MUITable>
|
||||
</TableContainer>
|
||||
);
|
||||
}
|
1
electron-react/src/components/table/index.js
Normal file
1
electron-react/src/components/table/index.js
Normal file
@ -0,0 +1 @@
|
||||
export { default } from "./Table";
|
Loading…
Reference in New Issue
Block a user