style react-table
-import React from "react";
+import Paper from "@material-ui/core/Paper";
import MuiTable from "@material-ui/core/Table";
import TableBody from "@material-ui/core/TableBody";
import TableCell from "@material-ui/core/TableCell";
+import TableContainer from "@material-ui/core/TableContainer";
import TableHead from "@material-ui/core/TableHead";
import TableRow from "@material-ui/core/TableRow";
+import React from "react";
import { useTable } from "react-table";
-export const KRTable = ({ columns, data }: { columns: any[]; data: any[] }) => {
+export const KRTable = ({ columns, data }: { columns: { Header: string; accessor: string }[]; data: any[] }) => {
const columnsMemo = React.useMemo(
() =>
[
@@ -51,6 +53,7 @@ export const KRTable = ({ columns, data }: { columns: any[]; data: any[] }) => {
});
return (
+ <TableContainer component={Paper} variant="outlined" square>
<MuiTable {...getTableProps()}>
<TableHead>
{headerGroups.map((headerGroup) => (
@@ -67,12 +70,17 @@ export const KRTable = ({ columns, data }: { columns: any[]; data: any[] }) => {
return (
<TableRow {...row.getRowProps()}>
{row.cells.map((cell) => {
- return <TableCell {...cell.getCellProps()}>{cell.render("Cell")}</TableCell>;
+ return (
+ <TableCell {...cell.getCellProps()} style={i === rows.length - 1 ? { borderBottom: "none" } : {}}>
+ {cell.render("Cell")}
+ </TableCell>
+ );
})}
</TableRow>
);
})}
</TableBody>
</MuiTable>
+ </TableContainer>
);
};
