Как предотвратить переполнение страницы, позволяя переполнить внутренний компонент в реагирование с Tailwind CSS? ⇐ CSS

[Anonymous]

Я строю приложение React с Tailwind CSS, и я сталкиваюсь с проблемой с переполнением. Я хочу предотвратить прокрутку основной страницы, в то же время позволяя внутренним компонентам, таким как таблицы, обрабатывать свой собственный переполнение (то есть прокрутка в компоненте). < /P>
Вот упрощенная версия моей настройки: < /p>
компонент Mayout < /p>
import Sidebar from './Sidebar';
import { Outlet } from 'react-router-dom';

const Layout = () => {
return (








);
};

export default Layout;

< /code>
ProgramOverViewPage Component < /p>
import BreadCrumb from '@/components/BreadCrumb';
import DataTable from '@/components/DataGrid/DataTable';

const ProgramOverviewPage = () => {
return (






);
};

export default ProgramOverviewPage;

< /code>
DataTable Component < /p>
import { useState, useEffect } from 'react';
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
import { ChevronsUpDown, MoreHorizontal } from 'lucide-react';
import ProgramData from './ProgramData';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
import { useFetchParams } from '@/api/querys';
import Pagination from '@/utils/Pagination';
import { ChevronRight, ChevronLeft } from 'lucide-react';
import FilterDialog from './FilterDialog';
import AddEditProgram from './AddEditProgram';
import { useTranslation } from 'react-i18next';
import { getRowClassName } from '@/utils/getRowClassName';

const PAGE_SIZE = 5;

function DataTable() {
const { t } = useTranslation();
const { data } = useFetchParams();
const [currentPage, setCurrentPage] = useState(1);
const [searchQuery, setSearchQuery] = useState('');
const [filteredData, setFilteredData] = useState([]);
const [filters, setFilters] = useState({});
const [activeFilterCount, setActiveFilterCount] = useState(0);

useEffect(() => {
if (data) {
setFilteredData(data);
}
}, [data]);

useEffect(() => {
if (data) {
const filtered = data
.filter((item) => {
if (!searchQuery) return true;
return Object.values(item).some((value) => value?.toString().toLowerCase().includes(searchQuery.toLowerCase()));
})
.filter((item) => {
return Object.keys(filters).every((key) => {
const filterValues = filters[key] || [];
if (filterValues.length === 0 || filterValues.includes('Alle')) return true;
return filterValues.includes(item[key]?.toString() || '');
});
});

setFilteredData(filtered);
setActiveFilterCount(Object.values(filters).reduce((acc, cur) => acc + cur.length, 0));
}
}, [searchQuery, filters, data]);

if (!data) return Loading...;

const filteredColumns = data.length > 0 ? Object.keys(data[0]).filter((key) => key !== 'ID') : [];
const totalPages = Math.ceil(filteredData.length / PAGE_SIZE);
const paginatedData = filteredData.slice((currentPage - 1) * PAGE_SIZE, currentPage * PAGE_SIZE);

const handlePreviousPage = () => setCurrentPage((prevPage) => Math.max(prevPage - 1, 1));
const handleNextPage = () => setCurrentPage((prevPage) => Math.min(prevPage + 1, totalPages));
const handleSearchQueryChange = (event) => setSearchQuery(event.target.value);
const handleFilterChange = (column, values) => setFilters((prevFilters) => ({ ...prevFilters, [column]: values }));
const handleAddProgram = (newProgram) => setFilteredData((prevData) => [...prevData, newProgram]);

return (














{t('T_Actions')}
{filteredColumns.map((column) => {column})}
{t('T_Actions')}



{paginatedData.map((item, index) => (








{filteredColumns.map((column) => (
{item[column] ?? 'N/A'}
))}




{t('T_Actions')}




{t('T_Actions')}
{t('T_Edit')}

{t('T_Delete')}













))}
{paginatedData.length === 0 && (

{t('T_No_Results')}

)}














);
}

export default DataTable;
< /code>
Основная проблема заключается в том, что я хочу предотвратить прокрутку основной страницы, но все же позволяю компоненту DataTable прокручивать внутреннюю (как горизонтально, так и вертикально, если это необходимо). < /p>
Что я попробовал:
Установка переполнений на основную компоновку. Прокрутка.
Использование максимального экрана, H-full и аналогичных утилит для высоты для обеспечения правильного размера и переполнения.>

Подробнее здесь: https://stackoverflow.com/questions/788 ... w-in-react