About styling a table dynamically and adding or removing columns

The columns wraps weirdly and I can’t figure out why it is happening.

const [isHidden, setIsHidden] = useState([]);
const { data: leadsData, isPending } = useLeads();
  
let columns = tableHead.length - isHidden.length

const handleVisiblity = (id) => {
  setIsHidden((prevHidden) => {
    if (prevHidden.includes(id)) {
      return prevHidden.filter((hiddenId) => hiddenId !== id);
    } else {
      return [...prevHidden, id];
    }
  });
};

if (isPending) return <Spinner />;

<div className="grid gap-2 w-full">
  <div className="flex items-center gap-6">
    <Popover>
      <PopoverTrigger>
        <NotButton size="icon">
          <ListTree />
        </NotButton>
      </PopoverTrigger>
      <PopoverContent align="start">
        <ul>
          {tableHead.map((table) => (
            <PopoverList
              key={table.id}
              id={table.id}
              title={table.title}
              isHidden={isHidden}
              handleVisiblity={handleVisiblity}
            />
          ))}
        </ul>
      </PopoverContent>
    </Popover>
  </div>
  <Separator className="mb-4" />
  <div>
    <Table className="w-full">
      <Table.Header>
        <Table.Row columns={columns}>
          {tableHead.map((table) => (
            <Table.Head key={table.id}>
              {!isHidden.includes(table.id) && table.title}
            </Table.Head>
          ))}
        </Table.Row>
      </Table.Header>
      <Table.Body>
        {leadsData.map((leads) => (
          <LeadsTable
            key={leads.id}
            leads={leads}
            isHidden={isHidden}
            id={tableHead.id}
            columns={columns}
          />
        ))}
      </Table.Body>
    </Table>
  </div>
</div>

ROW element

const Row = forwardRef(({ children, className, columns, ...props }, ref) => {
  console.log(columns) //output 7,6,5
  return (
    <tr
      ref={ref}
      style={{
        display: 'grid',
        gridTemplateColumns: `repeat(${columns}, minmax(200px, 1fr))` 
      }}
      className={cn(
        "border-b duration-300 ease-in-out hover:bg-muted/50 data-[state=selected]:bg-muted",
        className
      )}
      {...props}
    >
      {children}
    </tr>
  );
});

Head element

const Header = forwardRef(({ children, className, ...props }, ref) => (
  <thead ref={ref} className={cn("[&_tr]:border-b w-full", className)} {...props}>
    {children}
  </thead>
));

const Head = forwardRef(({ children, className, ...props }, ref) => (
  <th
    ref={ref}
    className={cn(
      "h-12 px-4 text-center font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 last:flex last:justify-center  ",
      className
    )}
    {...props}
  >
    {children}
  </th>
));

I am getting the correct number of columns in console.log(), it just wraps into 2 rows instead of a single row.

Before hiding columns

After hiding columns

The content part works just fine it’s just the <thead> part is acting weird.

You need to sign in to view this answers

Related Post