refactor: datatable styles

Author: sujatagunale

app/coins/[id]/page.tsx

@@ -111,9 +111,7 @@ const CoinDetails = async ({ params }: { params: Promise<{ id: string }> }) => {
               columns={exchangeColumns}
               data={coinData.tickers.slice(0, 7)}
               rowKey={(_, index) => index}
-              headerCellClassName='py-4! bg-dark-400 text-purple-100'
               bodyCellClassName='py-2!'
-              bodyRowClassName='relative'
             />
           </div>
         </LiveDataWrapper>

app/coins/page.tsx

@@ -90,9 +90,6 @@ const Coins = async ({
           columns={columns}
           data={coinsData}
           rowKey={(coin) => coin.id}
-          headerCellClassName='py-4! bg-dark-400 text-purple-100'
-          bodyCellClassName='py-4!'
-          bodyRowClassName='relative'
         />
 
         <CoinsPagination

components/DataTable.tsx

@@ -15,7 +15,7 @@ export const DataTable = <T,>({
   tableClassName,
   headerClassName,
   headerRowClassName,
-  headerCellClassName = 'text-purple-100',
+  headerCellClassName,
   bodyRowClassName,
   bodyCellClassName,
 }: DataTableProps<T>) => {
@@ -27,6 +27,7 @@ export const DataTable = <T,>({
             <TableHead
               key={columnIndex}
               className={cn(
+                'bg-dark-400 text-purple-100 py-4',
                 headerCellClassName,
                 column.headClassName,
                 columnIndex === 0 && 'pl-5',
@@ -43,14 +44,15 @@ export const DataTable = <T,>({
           <TableRow
             key={rowKey(row, rowIndex)}
             className={cn(
-              'overflow-hidden rounded-lg border-b border-purple-100/5 hover:bg-dark-400/30!',
+              'overflow-hidden rounded-lg border-b border-purple-100/5 hover:bg-dark-400/30! relative',
               bodyRowClassName
             )}
           >
             {columns.map((column, columnIndex) => (
               <TableCell
                 key={columnIndex}
                 className={cn(
+                  'py-4',
                   bodyCellClassName,
                   column.cellClassName,
                   columnIndex === 0 && 'pl-5',

components/LiveDataWrapper.tsx

@@ -93,8 +93,6 @@ export default function LiveDataWrapper({
           columns={tradeColumns}
           data={trades ?? []}
           rowKey={(_, index) => index}
-          headerCellClassName='py-4! bg-dark-400 text-purple-100'
-          bodyCellClassName='py-4!'
         />
       </div>
 

components/home/Categories.tsx

@@ -70,8 +70,6 @@ export const Categories = async () => {
         columns={columns}
         data={categories}
         rowKey={(_, index) => index}
-        headerCellClassName='py-3! bg-dark-400 text-purple-100'
-        bodyCellClassName='py-2!'
       />
     </div>
   );

components/home/TrendingCoins.tsx

@@ -66,7 +66,7 @@ export const TrendingCoins = async () => {
         columns={columns}
         data={trendingCoins.slice(0, 6)}
         rowKey={(_, index) => index}
-        headerCellClassName='py-3! bg-dark-400 text-purple-100'
+        headerCellClassName='py-3!'
         bodyCellClassName='py-2!'
       />
     </div>