diff --git a/compass/components/Table/Index.tsx b/compass/components/Table/Index.tsx index 10f81ed..d498ed8 100644 --- a/compass/components/Table/Index.tsx +++ b/compass/components/Table/Index.tsx @@ -2,6 +2,7 @@ import usersImport from "./users.json"; import { + Cell, ColumnDef, Row, createColumnHelper, @@ -11,7 +12,7 @@ import { sortingFns, useReactTable, } from "@tanstack/react-table"; -import { ChangeEvent, useState, useEffect } from "react"; +import { ChangeEvent, useState, useEffect, FunctionComponent } from "react"; import { RowOptionMenu } from "./RowOptionMenu"; import { RowOpenAction } from "./RowOpenAction"; import { TableAction } from "./TableAction"; @@ -153,6 +154,7 @@ export const Table = () => { {table.getRowModel().rows.map((row) => { + // Individual row const isUserVisible = row.original.visible; const rowClassNames = `text-gray-800 border-y lowercase hover:bg-gray-50 ${!isUserVisible ? "bg-gray-200 text-gray-500" : ""}`; return ( @@ -161,16 +163,7 @@ export const Table = () => { key={row.id} > {row.getVisibleCells().map((cell, i) => ( - - {flexRender(cell.column.columnDef.cell, cell.getContext())} - + ))} ); @@ -180,3 +173,21 @@ export const Table = () => { ) } + +type TableCellProps = { + cell: Cell; + //i: number; +} + +const TableCell: FunctionComponent = ({ cell }) => { + return ( + + {flexRender(cell.column.columnDef.cell, cell.getContext())} + ) +}