How can i add style to the Datatable in Primereact?

I am designing a Datatable using PrimeReact. It takes up the full width of the screen, but I want to make it smaller. So I use the tableStyle attribute of DataTable, and it works for the table, but not to the header, which still takes the full size of the screen.

I tried writing the style attribute in the HTML tag, but it doesn't work.

Here is the code:

 const header = (
    <div className="flex flex-wrap align-items-center justify-content-between gap-2">
        <span className="text-xl text-900 font-bold">Employees</span>
        <Button icon="pi pi-refresh" className='ml-5' rounded raised />
    </div>
);
  return (
    <DataTable value={data} header={header}  showGridlines tableStyle={{ minWidth: '60rem' ,width:'400px',alignItems:'center',marginLeft:'auto',marginRight:'auto'}}>
    <Column field="name" header="Name"></Column>
    <Column field="email_id" header="Email-id"></Column>
    <Column header="Status" body={checkbody}></Column>
  </DataTable>
)
}

Attached screenshot shows the current UI, where my header is full size nor refresh icon coming to the right side of the screen:

You need to install primeflex

npm install primeflex

and import this to your app

import 'primeflex/primeflex.css';

This above will apply flex css for header. To add fixed width you can override the header css using

.p-datatable .p-datatable-header {
    min-width: 60rem;
    width: 400px;
    margin: 0 auto;
}