Material-Table React. How to make the table Title and Header sticky
I figured it out in the end:
I had to add the these to the Material Table options. It means knowing in advance the height that you want your table to be. I
options={{
headerStyle: { position: 'sticky', top: 0 },
maxBodyHeight: 500,
}}
and then also this was necessary to add to the Material Table depending on pagination setting:
components={{
Container: props => (
<div style={{height: 500}}>
{props.children}
</div>
),
}}
RIck
Updated on June 11, 2022Comments
-
RIck about 2 years
Is it possible to make the table title, search field, global actions icons and column headers in the Material-Table sticky?
I've tried adding headerStyle to options and that has no effect (anyway that would only affect column headers and not the table title etc)
options={{ headerStyle: { position: 'sticky'}, paging: false, search: false, }}
Has anyone got any ideas how to do it?
I was hoping a 'sticky header' option existed but if it does I cannot see it! I would have thought a sticky header is a fairly common use case for tables.
This is the basic code to use a Material Table:
import React from 'react'; import MaterialTable from 'material-table'; export default function MaterialTableDemo() { const [state, setState] = React.useState({ columns: [ { title: 'Name', field: 'name' }, { title: 'Surname', field: 'surname' }, { title: 'Birth Year', field: 'birthYear', type: 'numeric' }, { title: 'Birth Place', field: 'birthCity', lookup: { 34: 'İstanbul', 63: 'Şanlıurfa' }, }, ], data: [ { name: 'Mehmet', surname: 'Baran', birthYear: 1987, birthCity: 63 }, { name: 'Zerya Betül', surname: 'Baran', birthYear: 2017, birthCity: 34, }, ], }); return ( <MaterialTable title="Editable Example" columns={state.columns} data={state.data} editable={{ onRowAdd: (newData) => new Promise((resolve) => { setTimeout(() => { resolve(); setState((prevState) => { const data = [...prevState.data]; data.push(newData); return { ...prevState, data }; }); }, 600); }), onRowUpdate: (newData, oldData) => new Promise((resolve) => { setTimeout(() => { resolve(); if (oldData) { setState((prevState) => { const data = [...prevState.data]; data[data.indexOf(oldData)] = newData; return { ...prevState, data }; }); } }, 600); }), onRowDelete: (oldData) => new Promise((resolve) => { setTimeout(() => { resolve(); setState((prevState) => { const data = [...prevState.data]; data.splice(data.indexOf(oldData), 1); return { ...prevState, data }; }); }, 600); }), }} />
); } `