I have a Material-UI 5 Card containing a Material React table (https://v1.material-react-table.com/). I want the table to occupy the entire remaining space within the Card. This is worked with some properties inside the table i.e. set to flex (photo1).
The issue arises when I use the framer-motion package to animate this card.
When motion is enabled i.e <m.div initial={{ opacity: 0 }} animate={{ opacity: 1 }}> the table disappears (photo2).
Here a sample of my code
import React, { useMemo } from 'react';import { MaterialReactTable } from 'material-react-table';// muiimport Container from '@mui/material/Container';import Card from '@mui/material/Card';import { m, AnimatePresence } from 'framer-motion';const data = [ { name: 'John', surname: 'Maverick', xxx: 'test', yyy: 'test', zzz: 'test', age: 30, salary: 10000, }, { name: 'John', surname: 'Maverick', xxx: 'test', yyy: 'test', zzz: 'test', age: 30, salary: 10000, }, { name: 'John', surname: 'Maverick', xxx: 'test', yyy: 'test', zzz: 'test', age: 30, salary: 10000, }, { name: 'John', surname: 'Maverick', xxx: 'test', yyy: 'test', zzz: 'test', age: 30, salary: 10000, },];const TasksDashboard = () => { const columns = useMemo( () => [ { accessorKey: 'name', header: 'Name', minSize: 300, muiTableHeadCellProps: { sx: { color: 'green' } }, Cell: ({ renderedCellValue }) => <strong>{renderedCellValue}</strong>, }, { accessorKey: 'surname', header: 'surname', minSize: 300, }, { accessorKey: 'xxx', header: 'xxx', minSize: 300, }, { accessorKey: 'zzz', header: 'zzz', minSize: 300, }, { accessorKey: 'yyy', header: 'yyy', minSize: 300, }, { accessorFn: (row) => `${row.age}`, id: 'age', header: 'Age', Header: <i style={{ color: 'red' }}>Age</i>, filterVariant: 'range-slider', muiTableHeadCellFilterSliderProps: { marks: false, max: 100000, min: -100000, step: 1000, }, Footer: <i style={{ color: 'red' }}>Age</i>, muiTableHeadCellProps: { align: 'right', }, muiTableBodyCellProps: { align: 'right', }, muiTableFooterCellProps: { align: 'right', }, maxSize: 200, }, { accessorKey: 'salary', header: 'Salary', muiTableHeadCellProps: { sx: { color: 'green' } }, maxSize: 200, muiTableBodyCellProps: { align: 'right', }, muiTableFooterCellProps: { align: 'right', }, }, { header: 'Age + Salary', id: 'mutlilineTest', accessorFn: (row) => `${row.age} ${row.salary}`, muiTableHeadCellProps: { sx: { color: 'blue' }, align: 'right' }, Cell: ({ renderedCellValue }) => <strong>{renderedCellValue}</strong>, maxSize: 200, muiTableBodyCellProps: { align: 'right', }, muiTableFooterCellProps: { align: 'right', }, }, ], [] ); return (<Container component={AnimatePresence} maxWidth={false} disableGutters sx={{ height: '100%' }}><Card sx={{ height: '100%', width: '100%', display: 'flex', flexDirection: 'column', position: 'relative' }}><m.div initial={{ opacity: 0 }} animate={{ opacity: 1 }}><div>HEADER </div><div>HEADER</div><div>HEADER</div><div>HEADER</div><div>HEADER</div><div>--------</div><MaterialReactTable columns={columns} data={data} enableFullScreenToggle={false} initialState={{ showGlobalFilter: true }} muiSearchTextFieldProps={{ variant: 'outlined', size: 'small', }} positionGlobalFilter="left" enableSorting={false} enableGlobalFilter enableColumnFilters enableColumnResizing enableStickyHeader enableStickyFooter muiTablePaperProps={{ sx: { flex: '1 1 0', display: 'flex','flex-flow': 'column', }, }} muiTableContainerProps={{ sx: { flex: '1 1 0', }, }} /></m.div></Card></Container> );};TasksDashboard.propTypes = {};export default TasksDashboard;I think the issue with the framer-motion is related to the height of the table. I'm struggling to find an alternative approach to achieve the desired maximized height effect to my table. Any recommendations?