React component to display data in table format with scroll bar and pagination

There are many different ways you could choice to display data in table format with scroll bar and pagination in react. We decided to use react-table since it's simple and has many features.

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.

1. React semantic UI
2. Material UI
3. Material table with group feature
4. MD table

Some implementations are using bootstrap or other packages that we may not want to introduce to your project.