Le bac à sable suivant montre le code qui fonctionne parfaitement pour une table UI Material placée dans un composant Paper avec un en-tête collant: https://codesandbox.io/s/2n40y
Je voudrais que les barres de défilement (horizontales et verticales) apparaissent sur les bords de la page du navigateur, respectivement en bas et à droite, tout en contrôlant toujours le défilement de la Table elle-même.
Actuellement, je ne peux le faire que lorsque je supprime le tableau du papier et en fait un enfant de la page directement - ou un enfant d'un div principal qui couvrirait toute la hauteur de la page . Pourtant, j'ai besoin du composant Paper pour y rester, où d'autres composants seront placés au-dessus et en dessous.
Avez-vous des idées pour y parvenir?
MISE À JOUR: dans l'esquisse ci-jointe, la bordure du navigateur apparaît en noir et les barres de défilement où elles devraient idéalement apparaître en vert. Il y a un conteneur div au milieu de la page qui contient le tableau en rouge. Les en-têtes du tableau doivent être collants et le tableau ne doit pas apparaître au-delà du conteneur div qui agit comme un emballage esthétique autour de lui. Idéalement, la barre de défilement verticale du navigateur ferait défiler toute la page vers le bas tout en laissant l'en-tête de page (titre + sous-titre) et les en-têtes de tableau collants. En outre, lors du défilement horizontal, le tableau doit défiler dans le div conteneur. C'est pourquoi j'ai marqué les parties qui ne devraient idéalement pas apparaître en pointillés.
3 Réponses :
Vous pouvez y parvenir en définissant la hauteur et la largeur de manière à ce qu'elles soient égales à la fenêtre:
<Paper style={{ height: "100vh", width: "100vw" }}>
Exemple modifié: https://codesandbox.io/s/table-sticky-header-forked-l77is?file=/demo.js
Merci mais non, ce n'est pas ce que je recherche. L'objet Paper doit rester au milieu, et non prendre le plein écran, conformément aux spécifications de conception.
Toutes les modifications que nous devons apporter se trouvent sur demo.js
Premièrement, nous devons utiliser un TableContainer MUI personnalisé comme containerComponent code> pour votre @ devexpress / dx-react-grid-material-ui Table . Fondamentalement, le but est que nous puissions supprimer les propriétés overflow de la Table afin que le défilement soit principalement pour que le corps réponde à l'exigence de
les barres de défilement (horizontales et verticales) devant apparaître sur les bords du page du navigateur, respectivement en bas et à droite
<Paper>
<Grid rows={rows} columns={columns} rootComponent={GridRoot}>
<Table
containerComponent={MUITableContainer}
tableComponent={StickyTable}
/>
...
Deuxièmement, à votre MUITableContainer , débarrassez-vous de la hauteur: 400px pour que la hauteur de la table réponde à le contenu. Encore une fois, les barres de défilement en bas et à droite du corps du navigateur contrôlent désormais les positions de défilement du document - cela inclut le tableau. Jetez également un œil à la prop Table containerComponent - nous avons attribué le TableContainer personnalisé que nous avons créé précédemment.
import TableContainer from "@material-ui/core/TableContainer";
import makeStyles from "@material-ui/core/styles/makeStyles";
const useStyles = makeStyles({
tableContainer: {
overflow: "initial"
}
});
const MUITableContainer = ({ children, ...rest }) => {
const classes = useStyles();
return (
<TableContainer classes={{ root: classes.tableContainer }} {...rest}>
{children}
</TableContainer>
);
};
Enfin, pour tester cette exigence:
il y aura d'autres objets avant et après.
Il suffit de rendre des exemples de composants avant et après le composant Paper
Merci!! Oui, c'est presque ça !! La seule chose que je ne parviens toujours pas à faire fonctionner est que lorsque l'écran se rétrécit, la table jaillit du composant Paper . Même si le défilement horizontal fonctionne correctement et se trouve en bas de la page, la page entière défile à la place du tableau à l'intérieur du Papier . J'espère que vous voyez ce que je veux dire?
Jetez un œil à cet exemple que j'ai écrit: codesandbox.io/ s / agitated-meitner-gc1ye? file = / index.html . Faites attention au
Supprimez
style = {{height: "400px"}}demo.js et il aura toute la hauteur. Si ce n'est pas un problème, pouvez-vous mieux l'expliquer?Merci @ VeselinKontić - mais non, si je fais ceci: (1) l'en-tête collant ne colle plus; et (2) le défilement horizontal est toujours réellement dans l'objet
Paperet non au bas de la page, en pleine largeur. J'espère que c'est plus clair?