Material-Table React. How to make the table Title and Header sticky - reactjs

Question

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);
}),
}}
/>
);
}
`

Answer 1

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>
),
}}