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

TableCell styling changes

Browse Source 
i love `border`
This commit is contained in:
Andy Chan 2024-04-19 16:36:16 -04:00
parent d689e22dd8
commit ad25d5fe3f
3 changed files with 8 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
compass/components/Table/Index.tsx
View File

@ -186,7 +186,7 @@ export const Table = () => {
> >
{row.getVisibleCells().map((cell, i) => ( {row.getVisibleCells().map((cell, i) => (
<td key={cell.id} <td key={cell.id}
className={"p-2 [&:nth-child(n+3)]:border-x relative first:text-left first:px-0 last:border-none"} className={"[&:nth-child(n+3)]:border-x relative first:text-left first:px-0 last:border-none"}
> >
{flexRender(cell.column.columnDef.cell, cell.getContext())} {flexRender(cell.column.columnDef.cell, cell.getContext())}
</td> </td>

4
compass/components/Table/PrimaryTableCell.tsx
View File

@ -12,9 +12,9 @@ export const PrimaryTableCell = ({ getValue, row, column, table }) => {
}; };
return ( return (
<div className="font-semibold group flex flex-row items-center justify-between pr-2"> <div className="font-semibold group">
<TableCell getValue={getValue} row={row} column={column} table={table} /> <TableCell getValue={getValue} row={row} column={column} table={table} />
<span> <span className="absolute right-1 top-1">
<Drawer title={getValue()} editableContent={pageContent} onSave={handleDrawerContentChange}>{pageContent}</Drawer> <Drawer title={getValue()} editableContent={pageContent} onSave={handleDrawerContentChange}>{pageContent}</Drawer>
</span> </span>
</div> </div>

6
compass/components/Table/TableCell.tsx
View File

@ -12,6 +12,10 @@ export const TableCell = ({ getValue, row, column, table }) => {
const onBlur = () => { const onBlur = () => {
table.options.meta?.updateData(row.index, column.id, value); table.options.meta?.updateData(row.index, column.id, value);
}; };
// focus:border focus:border-gray-200
const className = "w-full p-3 bg-inherit rounded-md outline-none border border-transparent relative "
+ "focus:shadow-md focus:border-gray-200 focus:bg-white focus:z-20 focus:p-4 focus:-m-1 "
+ "focus:w-[calc(100%+0.5rem)]";
return <input className="w-full py-2 bg-inherit" value={value} onChange={e => setValue(e.target.value)} onBlur={onBlur} />; return <input className={className} value={value} onChange={e => setValue(e.target.value)} onBlur={onBlur} />;
}; };