rushilwiz/compass
1
0
Fork 0
mirror of https://github.com/cssgunc/compass.git synced 2025-04-28 13:59:49 -04:00
Code Issues Actions Packages Projects Releases Wiki Activity

Fix table lines and update bug

Browse Source
This commit is contained in:
pmoharana-cmd 2025-04-18 23:27:07 -04:00
parent 55d1e2f487
commit 7514376ff3
1 changed files with 17 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
compass/components/Table/Table.tsx
View File

@ -83,7 +83,7 @@ export default function Table<T extends DataPoint>({
deleteEndpoint, deleteEndpoint,
isAdmin = false, isAdmin = false,
}: TableProps<T>) { }: TableProps<T>) {
console.log(data); const offset = isAdmin ? 1 : 0;
const columnHelper = createColumnHelper<T>(); const columnHelper = createColumnHelper<T>();
@ -222,12 +222,7 @@ export default function Table<T extends DataPoint>({
scope="col" scope="col"
className={ className={
"p-2 border-gray-200 border-y font-medium " + "p-2 border-gray-200 border-y font-medium " +
((!isAdmin && (0 + offset < i && i < columns.length - 1
0 < i &&
i < columns.length - 1) ||
(isAdmin &&
1 < i &&
i < columns.length - 1)
? "border-x" ? "border-x"
: "") : "")
} }
@ -236,9 +231,9 @@ export default function Table<T extends DataPoint>({
{header.isPlaceholder {header.isPlaceholder
? null ? null
: flexRender( : flexRender(
header.column.columnDef.header, header.column.columnDef.header,
header.getContext() header.getContext()
)} )}
</th> </th>
))} ))}
</tr> </tr>
@ -248,19 +243,16 @@ export default function Table<T extends DataPoint>({
{table.getRowModel().rows.map((row) => { {table.getRowModel().rows.map((row) => {
// Individual row // Individual row
const isDataVisible = row.original.visible; const isDataVisible = row.original.visible;
const rowClassNames = `text-gray-800 border-y lowercase hover:bg-gray-50 ${ const rowClassNames = `text-gray-800 border-y lowercase hover:bg-gray-50 ${!isDataVisible ? "bg-gray-200 text-gray-500" : ""
!isDataVisible ? "bg-gray-200 text-gray-500" : "" }`;
}`;
return ( return (
<tr className={rowClassNames} key={row.id}> <tr className={rowClassNames} key={row.id}>
{row.getVisibleCells().map((cell, i) => ( {row.getVisibleCells().map((cell, i) => (
<td <td
key={cell.id} key={cell.id}
className={`relative first:text-left first:px-0 last:border-none ${ className={
isAdmin `[&:nth-child(n+${2 + offset})]:border-x relative first:text-left first:px-0 last:border-none`
? "[&:nth-child(n+3)]" }
: "[&:nth-child(n+2)]"
}:border-x`}
> >
{flexRender( {flexRender(
cell.column.columnDef.cell, cell.column.columnDef.cell,
@ -291,10 +283,13 @@ export default function Table<T extends DataPoint>({
createRow(newItem).then((response) => { createRow(newItem).then((response) => {
if (response.ok) { if (response.ok) {
newItem.visible = true; newItem.visible = true;
setData((prev) => [ response.json().then((data) => {
...prev, newItem.id = data.id;
newItem, setData((prev) => [
]); ...prev,
newItem,
]);
});
} }
}); });