diff --git a/lattice/src/shared/DataTable/DataTable.tsx b/lattice/src/shared/DataTable/DataTable.tsx index 94510f86d..a5246cd49 100644 --- a/lattice/src/shared/DataTable/DataTable.tsx +++ b/lattice/src/shared/DataTable/DataTable.tsx @@ -1,18 +1,18 @@ -import React, { FC, Fragment, useEffect, useRef, useState } from 'react'; -import ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown'; -import classNames from 'classnames'; -import OrderBy from 'lodash/orderBy'; -import Table from '@material-ui/core/Table'; -import TableBody from '@material-ui/core/TableBody'; -import TableCell from '@material-ui/core/TableCell'; -import TableHead from '@material-ui/core/TableHead'; +import React, { FC, Fragment, useEffect, useRef, useState } from "react"; +import ArrowDropDownIcon from "@material-ui/icons/ArrowDropDown"; +import classNames from "classnames"; +import OrderBy from "lodash/orderBy"; +import Table from "@material-ui/core/Table"; +import TableBody from "@material-ui/core/TableBody"; +import TableCell from "@material-ui/core/TableCell"; +import TableHead from "@material-ui/core/TableHead"; // import TablePagination from '@material-ui/core/TablePagination'; -import TableRow from '@material-ui/core/TableRow'; -import Typography from '@material-ui/core/Typography'; -import { ColumnInfo } from 'proto/pilosa_pb'; -import { Pager } from 'shared/Pager'; -import { formatTableCell } from 'shared/utils/formatTableCell'; -import css from './DataTable.module.scss'; +import TableRow from "@material-ui/core/TableRow"; +import Typography from "@material-ui/core/Typography"; +import { ColumnInfo } from "proto/pilosa_pb"; +import { Pager } from "shared/Pager"; +import { formatTableCell } from "shared/utils/formatTableCell"; +import css from "./DataTable.module.scss"; type TableProps = { headers: ColumnInfo.AsObject[]; @@ -25,11 +25,11 @@ export const DataTable: FC = ({ headers, data, loading = false, - autoWidth = false + autoWidth = false, }) => { const [sortedData, setSortedData] = useState(data); const [sort, setSort] = useState(headers[0]?.name); - const [sortDir, setSortDir] = useState<'asc' | 'desc'>('asc'); + const [sortDir, setSortDir] = useState<"asc" | "desc">("asc"); const [page, setPage] = useState(1); const [rowsPerPage, setRowsPerPage] = useState(10); const resultsRef = useRef(null); @@ -54,8 +54,8 @@ export const DataTable: FC = ({ setTimeout(() => { if (resultsRef.current) { resultsRef.current.scrollIntoView({ - behavior: 'smooth', - block: 'start' + behavior: "smooth", + block: "start", }); } }, 0); @@ -63,15 +63,13 @@ export const DataTable: FC = ({ const onSortClick = (name: string) => { if (sort === name) { - setSortDir(sortDir === 'desc' ? 'asc' : 'desc'); + setSortDir(sortDir === "desc" ? "asc" : "desc"); } else { setSort(name); - setSortDir('asc'); + setSortDir("asc"); } }; - - return (
@@ -86,14 +84,14 @@ export const DataTable: FC = ({ > onSortClick(col.name)} > {col.name} @@ -112,7 +110,7 @@ export const DataTable: FC = ({ .map((row, rowIdx) => ( {headers.map((col, colIdx) => ( = ({ className={css.tableCell} > {formatTableCell(row, col)} - + ))} {autoWidth ? : null} diff --git a/lattice/src/shared/utils/formatTableCell.test.tsx b/lattice/src/shared/utils/formatTableCell.test.tsx index cbbc26ca3..2578a34ae 100644 --- a/lattice/src/shared/utils/formatTableCell.test.tsx +++ b/lattice/src/shared/utils/formatTableCell.test.tsx @@ -1,9 +1,8 @@ -import { formatTableCell } from './formatTableCell'; +import { formatTableCell } from "./formatTableCell"; import React from "react"; import { render, unmountComponentAtNode } from "react-dom"; import { act } from "react-dom/test-utils"; - let container = null; beforeEach(() => { // setup a DOM element as a render target @@ -19,8 +18,8 @@ afterEach(() => { }); it("it renders strings in quotes", () => { - let row = {thing:"quoted string!"}; - let col = {name: "thing", datatype: "[]string"}; + let row = { thing: "quoted string!" }; + let col = { name: "thing", datatype: "[]string" }; act(() => { render(formatTableCell(row, col), container); @@ -29,8 +28,8 @@ it("it renders strings in quotes", () => { }); it("renders objects as stringified", () => { - let row = {thing:{val:"quoted string!"}}; - let col = {name: "thing", datatype: "object"}; + let row = { thing: { val: "quoted string!" } }; + let col = { name: "thing", datatype: "object" }; act(() => { render(formatTableCell(row, col), container); @@ -41,13 +40,11 @@ it("renders objects as stringified", () => { }); it("it puts timestamps in MM/DD/YYYY hh:mm:ss a format", () => { - let row = {thing:1635452050094}; - let col = {name: "thing", datatype: "timestamp"}; + let row = { thing: 1635452050094 }; + let col = { name: "thing", datatype: "timestamp" }; act(() => { render(formatTableCell(row, col), container); }); expect(container.textContent).toBe("10/28/2021 08:14:10 pm"); }); - - diff --git a/lattice/src/shared/utils/formatTableCell.tsx b/lattice/src/shared/utils/formatTableCell.tsx index 9dd428ef8..3c6de098b 100644 --- a/lattice/src/shared/utils/formatTableCell.tsx +++ b/lattice/src/shared/utils/formatTableCell.tsx @@ -1,27 +1,23 @@ -import moment from 'moment'; -import css from '../DataTable/DataTable.module.scss'; +import moment from "moment"; +import css from "../DataTable/DataTable.module.scss"; export const formatTableCell = (row: any, col: any) => { - if (typeof row[col.name] === 'object') { - return ( + if (typeof row[col.name] === "object") { + return (
         {JSON.stringify(row[col.name], null, 2)}
-      
) - } else if (row[col.name] !== undefined) { - if (col.datatype === '[]string') { - return ( - - {'"' + (row[col.name]) + '"'} - - ) - } - return ( - - {col.datatype === 'timestamp' && row[col.name] - ? moment - .utc(row[col.name]) - .format('MM/DD/YYYY hh:mm:ss a') - : row[col.name].toLocaleString()} - ) + + ); + } else if (row[col.name] !== undefined) { + if (col.datatype === "[]string") { + return {'"' + row[col.name] + '"'}; } - return null -} + return ( + + {col.datatype === "timestamp" && row[col.name] + ? moment.utc(row[col.name]).format("MM/DD/YYYY hh:mm:ss a") + : row[col.name].toLocaleString()} + + ); + } + return null; +};