stephen/apartment-dashboard
1
0
Fork 0
Code Issues Pull Requests Actions Releases Wiki Activity

Add mobile-friendly sticky column to units list table

Browse Source
This commit is contained in:
Stephen Minakian
2026-01-21 15:08:55 -07:00
parent 2ffe3a0197
commit f33ef01a6d
1 changed files with 4 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/App.jsx
View File

@ -781,12 +781,12 @@ const ApartmentDashboard = () => {
{/* Unit Cards - List View */} {/* Unit Cards - List View */}
{unitsViewMode === 'list' && ( {unitsViewMode === 'list' && (
<div className="bg-white rounded-lg shadow-md overflow-hidden"> <div className="bg-white rounded-lg shadow-md overflow-x-auto">
<table className="w-full"> <table className="w-full min-w-max">
<thead className="bg-gray-50 border-b"> <thead className="bg-gray-50 border-b">
<tr> <tr>
<th <th
className="text-left py-3 px-4 font-semibold text-gray-700 cursor-pointer hover:bg-gray-100 select-none" className="text-left py-3 px-4 font-semibold text-gray-700 cursor-pointer hover:bg-gray-100 select-none sticky left-0 z-10 bg-gray-50 shadow-[2px_0_5px_-2px_rgba(0,0,0,0.1)]"
onClick={() => handleSort('unitCode')} onClick={() => handleSort('unitCode')}
> >
<span className="flex items-center"> <span className="flex items-center">
@ -866,7 +866,7 @@ const ApartmentDashboard = () => {
key={unit.unitCode} key={unit.unitCode}
className={`border-b ${index % 2 === 0 ? 'bg-white' : 'bg-gray-50'} ${watchedUnits.has(unit.unitCode) ? 'ring-2 ring-inset ring-blue-400' : ''} hover:bg-blue-50`} className={`border-b ${index % 2 === 0 ? 'bg-white' : 'bg-gray-50'} ${watchedUnits.has(unit.unitCode) ? 'ring-2 ring-inset ring-blue-400' : ''} hover:bg-blue-50`}
> >
<td className="py-3 px-4 font-bold">{unit.unitCode}</td> <td className={`py-3 px-4 font-bold sticky left-0 z-10 shadow-[2px_0_5px_-2px_rgba(0,0,0,0.1)] ${index % 2 === 0 ? 'bg-white' : 'bg-gray-50'}`}>{unit.unitCode}</td>
<td className="py-3 px-4 text-gray-600">{unit.planName}</td> <td className="py-3 px-4 text-gray-600">{unit.planName}</td>
<td className="py-3 px-4 text-center">{unit.bedCount}/{unit.bathCount}</td> <td className="py-3 px-4 text-center">{unit.bedCount}/{unit.bathCount}</td>
<td className="py-3 px-4 text-center">{unit.area} sqft</td> <td className="py-3 px-4 text-center">{unit.area} sqft</td>