React-table might be the easy way and it comes with both scroll bar and page pagination. You could configure the screen size to display and few customization to apply. There are few good examples to show the implementations. We are using this to display the workflow approvals and reviewers for SharePoint list item with pagination hidden. Here is the screenshot.
The code is also very simple. Here is the sniipet.
return (
<div className={styles.container}>
<div className={styles.row}>
<Pivot>
<PivotItem headerText="Workflow Approvals" itemIcon="People">
<div className={styles.column}>
{/* <h3>Workflow Approvers</h3> */}
<ReactTable
data={data}
columns={[
{
columns: [
{
Header: "Name",
accessor: "name",
},
// {
// Header: "email",
// id: "email",
// accessor: d => d.email
// },
{
Header: "Role",
accessor: "role"
},
{
Header: "Status",
accessor: "status"
}
]
}
]}
defaultPageSize={5}
showPagination={false}
style={{
height: "200px" // This will force the table body to overflow and scroll, since there is not enough room
}}
className="-striped -highlight"
/>
</div>
</PivotItem>
<PivotItem headerText="Workflow Reviewers" itemIcon="People">
<div className={styles.column}>
{/* <h3>Workflow Approvers</h3> */}
<ReactTable
data={data1}
columns={[
{
columns: [
{
Header: "Name",
accessor: "name",
},
// {
// Header: "email",
// id: "email",
// accessor: d => d.email
// },
{
Header: "Reason",
accessor: "reason"
},
{
Header: "Status",
accessor: "status"
}
]
}
]}
defaultPageSize={5}
showPagination={false}
style={{
height: "200px" // This will force the table body to overflow and scroll, since there is not enough room
}}
className="-striped -highlight"
/>
</div>
</PivotItem>
</Pivot>
</div>
</div>
);
The mock-up data is listed below for your reference.
export const data1 = [
{
id: 22,
name: 'Test User',
email: 'test.user@mycompany.com',
role: 'Some role',
status: 'Open',
},
{
id: 23,
name: "John Smith",
email: 'jsmith@mycompany.com',
role: 'Pubs developer',
status: 'Open',
}
];
There are few other data tables you could check for your own purposes.
Some implementations are using bootstrap or other packages that we may not want to introduce to your project.
