0

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>

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

Examina otras preguntas con la etiqueta o formula tu propia pregunta.