Untitled
plain_text
2 months ago
1.7 kB
1
Indexable
Never
<section className="flex flex-col h-full"> <Header columns={headerCols} /> <main className="mt-1 flex flex-col max-h-[560px] overflow-auto"> {dataSet.map(row => ( <div key={row.id} className={`grid grid-cols-${colsCount} min-h-[48px] shrink-0 odd:bg-gray-50 border-2 border-transparent hover:border-gray-300 hover:bg-[#ecf0f1]`} > { columns.map(col => ( <div key={col.key + col.text} className=" col-span-1 grid place-items-center text-center" > {col.linkRoot ? <Link className="w-full h-full grid place-items-center hover:bg-blue-100 text-blue-400 underline" href={col.linkRoot + row[col.key]}>{row[col.key]}</Link> : col.isImage ? <div className="relative w-80 h-52"> <Image className="object-contain" src={row[col.key]} alt="Image" fill /> </div> : row[col.key] } </div> )) } { extra && <div className="col-span-1 grid place-items-center text-center"> <span onClick={() => extra.handleClick(row[extra.key])}> {extra.node} </span> </div> } </div> ))} </main> </section>