From 70eb4b50c6b4396b71406175b7f9e6a3f2e3cdb6 Mon Sep 17 00:00:00 2001
From: Himanshu Aggarwal <aggarwah@mcmaster.ca>
Date: Thu, 10 Mar 2022 21:00:33 -0500
Subject: [PATCH] Add table header; Make header sticky
---
src/cryptometrics/pages/index.js | 49 +++++++++++++++++++++++---------
1 file changed, 35 insertions(+), 14 deletions(-)
diff --git a/src/cryptometrics/pages/index.js b/src/cryptometrics/pages/index.js
index 01d23a7..4cf71e3 100644
--- a/src/cryptometrics/pages/index.js
+++ b/src/cryptometrics/pages/index.js
@@ -91,6 +91,37 @@ export default function Home() {
content={<TableIcon className="w-6 h-6 dark:text-white" />}
>
<Table>
+ <TableRow className="h-14 items-center sticky top-0 z-50">
+ <TableCell className="w-6 h-10"></TableCell>
+ <TableCell className="w-24 h-10">
+ <p className="font-medium text-base text-center">Name</p>
+ </TableCell>
+ <TableCell className="w-24 h-10">
+ <p className="font-medium text-base text-center">Price</p>
+ </TableCell>
+ <TableCell className="w-[10%] h-10">
+ <p className="font-medium text-base text-center">
+ Market Cap
+ </p>
+ </TableCell>
+ <TableCell className="w-40 h-10">
+ <p className="font-medium text-base text-center">
+ 24h change in %
+ </p>
+ </TableCell>
+ <TableCell className="w-40 h-10">
+ <p className="font-medium text-base text-center">
+ 24h change in $
+ </p>
+ </TableCell>
+ <TableCell className="h-10">
+ <div className="w-52">
+ <p className="font-medium text-base text-center">
+ Chart
+ </p>
+ </div>
+ </TableCell>
+ </TableRow>
{!listOfCoins.isLoading &&
filteredCoins.map((coin, index) => {
return (
@@ -119,8 +150,7 @@ export default function Home() {
</p>
</TableCell>
<TableCell className="w-24">
- <p className="font-medium text-base">Price</p>
- <p className="font-light text-sm text-blue-500 mt-1">
+ <p className="font-light text-base text-blue-500 mt-1">
$
{numeral(coin.current_price).format(
"0,0.[0000000]"
@@ -128,10 +158,7 @@ export default function Home() {
</p>
</TableCell>
<TableCell className="w-[10%]">
- <p className="font-medium text-base">
- Market Cap
- </p>
- <p className="font-light text-sm text-pink-400 mt-1">
+ <p className="font-light text-base text-pink-400 mt-1">
$
{numeral(coin.market_cap).format(
"0,0.[000]a"
@@ -139,12 +166,9 @@ export default function Home() {
</p>
</TableCell>
<TableCell className="w-40">
- <p className="font-medium text-base">
- 24h change in %
- </p>
<p
className={classNames(
- "font-light text-sm mt-1",
+ "font-light text-base mt-1",
{
"text-red-400":
coin.price_change_percentage_24h < 0,
@@ -160,12 +184,9 @@ export default function Home() {
</p>
</TableCell>
<TableCell className="w-40">
- <p className="font-medium text-base">
- 24h change in $
- </p>
<p
className={classNames(
- "font-light text-sm mt-1",
+ "font-light text-base mt-1",
{
"text-red-400": coin.price_change_24h < 0,
"text-green-400":
--
GitLab