Estoy haciendo un proyecto en NextJS utilizando NextUI y TailwindCSS. Tengo la parte para ver los shifts, la cual contiene una tabla y varios filtros. Cuando elimino la tabla, lo demas se ve perfecto, pero cuando agrego la tabla, se ve todo mas chico, como que se pone todo al tamaño de la tabla y se ve muy mal. Probe agregando overflow-x-auto
y varias cosas mas pero nada funciona. La idea es que se vaya acomodando al tamaño del dispositivo.
<div className='flex flex-col p-4'>
<p className="text-2xl font-semibold mb-4">Turnos</p>
<div className="mb-4">
<Button color="primary" onClick={() => router.push('/dashboard/shifts/create')} variant="ghost" className="w-auto">
Nuevos turnos
</Button>
</div>
<div className="flex flex-col md:flex-row items-center mb-4 gap-4 w-full">
<Autocomplete
label="Servicio"
defaultItems={services}
placeholder="Seleccionar servicio"
onSelectionChange={(value) => setSelectedService(value)}
selectedKey={selectedService}
className="w-full md:w-2/3"
size="sm"
>
{services.map((service) => (
<AutocompleteItem key={service.id} value={service.id}>
{service.name}
</AutocompleteItem>
))}
</Autocomplete>
<DatePicker
label="Fecha"
isDisabled={!selectedService}
onChange={(date) => setSelectedDate(date)}
value={selectedDate}
className="w-full md:w-auto"
size="sm"
/>
<Select
label="Filtrar por estado"
value={stateFilter}
onChange={(e) => setStateFilter(e.target.value)}
size="sm"
isDisabled={!selectedService}
>
<SelectItem key="all">Todos</SelectItem>
{states.map((state) => (
<SelectItem key={state.id.toString()}>{state.name}</SelectItem>
))}
</Select>
</div>
<div className="overflow-x-auto grid w-full">
<Table
aria-label="Turnos"
isStriped
className="w-full"
bottomContent={
<div className='flex w-full justify-center'>
<Pagination
isCompact
showControls
showShadow
color="primary"
page={page}
total={Math.ceil(rows.length / rowsPerPage)}
onChange={(newPage) => setPage(newPage)}
/>
</div>
}
>
<TableHeader columns={columns}>
{(column) => <TableColumn key={column.key}>{column.label}</TableColumn>}
</TableHeader>
<TableBody items={rows.slice((page - 1) * rowsPerPage, page * rowsPerPage)}>
{(item) => (
<TableRow key={item.key}>
{(columnKey) => (
<TableCell key={`${item.key}-${columnKey}`}>
{item[columnKey]}
</TableCell>
)}
</TableRow>
)}
</TableBody>
</Table>
</div>
</div>