Displaying SharePoint Data Into react-bootstrap-table-next

About

One common development scenario we as developers regularly implement is displaying SharePoint data into a tabular format with various functionality like sort, search, formatting etc. The most-used option was Bootstrap table and now with SPFx development, we can also show the list data on frontend webpart using react-bootstrap-table2.

Now react-bootstrap-table2 is available on NPM module, so it is also known as react-bootstrap-table-next.

In this article, we will see how to create a client Web Part, using SharePoint Framework and React JS that displays SharePoint List data into react-bootstrap-table. We will use PNP method to get list data.

First things first, let’s have a look into SharePoint List schema, from which we will pull the data. I have created a SharePoint list calling employee details with few dummy records.

Let’s start with our solution

Open node command prompt and create SPFx solution for web part using yeomen generator. Select React as a framework. Below is screen shot of my solution.

yo @microsoft/sharepoint

To verify if everything is okay with the solution, use gulp build command.

Add Pre-requisite

To add react-bootstrap-table-next to solution, run the below command

npm install react-bootstrap-table-next –save
Add @pnp/sp to solution, using the below command

npm install @pnp/sp
Open the solution in VS code using command

code .

Our solution folder for webpart will look like the below image:

Now let’s start with coding part,

Open the file DataIntoBsTable.tsx file and add below import statements

//Import related to react-bootstrap-table-next
import BootstrapTable from 'react-bootstrap-table-next';
//Import from @pnp/sp
import { sp } from "@pnp/sp";
import "@pnp/sp/webs";
import "@pnp/sp/lists/web";
import "@pnp/sp/items/list";

In Render function add the below code to load the css file:

let cssURL = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css";
SPComponentLoader.loadCss(cssURL);

Create table schema

const empTablecolumns = [
{
dataField: "EmployeeName",
text: "Employee Name",
headerStyle : {backgroundColor: '#81c784'},
sort : true
},
{
dataField: "MobileNumber",
text: "Mobile Number"
},
{
dataField: "Departments",
text: "Departments"
},
{
dataField: "JoiningDate",
text: "Joining Date"
}];

Important points to take care of while deciding column Header:

dataField :It will be same like column name in list item response
text : It will be a name to show in the Table
headerStyle : to added any colour (in this I have added header color to employee name column)
sort : true (Ascending and Descending attributes).

There are various attributes like formatting, row based event and many more options available.

Code to get List Items and bind to table

Add a new interface to get list items

export interface IShowEmployeeStates{
employeeList :any[]
}

Add Function to get all the list Items

public getEmployeeDetails = () =>{
sp.web.lists.getByTitle("EmployeeDetails").items.getAll().
then((results : any)=>{
this.setState({
employeeList:results
});
});
}

After making all the changes, default class code looks like:

export default class DataIntoBsTable extends React.Component<IDataIntoBsTableProps, IDataIntoBsTableStates> {
constructor(props: IDataIntoBsTableProps){
super(props);
this.state ={
employeeList : []
}
}
public getEmployeeDetails = () =>{
sp.web.lists.getByTitle("EmployeeDetails").items.getAll().
then((results : any)=>{
this.setState({
employeeList:results
});
});
}
public componentDidMount(){
this.getEmployeeDetails();
}
public render(): React.ReactElement<IDataIntoBsTableProps> {
let cssURL = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css";
SPComponentLoader.loadCss(cssURL);
return (
<div className={ styles.dataIntoBsTable }>
<div className={ styles.container }>
<div className={ styles.row }>
<div className={ styles.column }>
<span className={ styles.title }>Welcome to SharePoint!</span>
<p className={ styles.subTitle }>List items in react-bootstrap-table-next.</p>
</div>
</div>
<BootstrapTable keyField='id' data={this.state.employeeList} columns={ empTablecolumns } headerClasses="header-class"/>
</div>
</div>
);
}
}

Once done with the above changes run the gulp serve command and open the sharepoint site workbench. Once you add the webpart, it will show the list data into table.

Column Formatting

Next we want to format the employee name, making it bold and add some text color. To achieve that we need to add formatter to Employee Name column.

Now Employee Name column schema will look like below

{
dataField: "EmployeeName",
text: "Employee Name",
headerStyle : {backgroundColor: '#81c784'},
sort :true,
formatter: makeEmpColBold
},

Next add makeEmpColBold function as below and I have also added text color to the employee name.

function makeEmpColBold(cell, row) {
return (
<span>
<strong style={ { color: 'blue' } }> { cell }</strong>
</span>
);
}

Now our web part will look like:

Adding Pagination to the table

First we need to install Paginator to our solution using below command.

npm install react-bootstrap-table2-paginator --save

Next import the below statement into the solution

import 'react-bootstrap-table2-paginator/dist/react-bootstrap-table2-paginator.min.css';

import paginationFactory from 'react-bootstrap-table2-paginator';

Add pagination option value in render method. Here I have sizePerPage as 3, we can get this value dynamically from webpart properties.

const paginationOptions = {
sizePerPage: 3,
hideSizePerPage: true,
hidePageListOnlyOnePage: true
};

In bootstrap table add the pagination option like below

<BootstrapTable keyField='id'
data={this.state.employeeList}
columns={ empTablecolumns }
pagination={paginationFactory(paginationOptions)}
headerClasses="header-class"/>

Now run the gulp serve and refresh the page. Now webpart will display 3 items per page,with pagination options.

Conclusion

So in this article we have seen loading SharePoint data into react-bootstrap-table-next, with a few options like sorting, formatting and pagination. Please share your feedback and any comments or queries.

I'm happy to try, learn and share with you.

10 Comments

Join the conversation! Your thoughts help the community grow.

vemuri5y ago
Nice article. I would like to filter the initial array and assign this to bootstrap datafile. how to acheive this dynamic binding
Krishna Agrawal5y ago
Hi Vikas, Nice article..Well explained...I have a query like how can we display values of people picker field using this? Since we are getting Id of the people field in the response. Thanks
- Olivia Onuoha5y ago
  Please I need help with querying the people picker value, and also the CreatedBy/Author Value
- Olivia Onuoha5y ago
  Very informative and detailed post. Thank you!
- Vikas Jha5y ago
  You can get the people picker value in query, use Expand the people picker to get the display name. If you need more help then please let me know
Amit K6y ago
Excellent tutorial...just want to know if there are more than 15 columns how we can set the width and implement a horizontal scroll?
- Vikas Jha6y ago
  Hey Amit, You can try to add header style to add width to your header headerStyle: (colum, colIndex) => { return { width: '180px', textAlign: 'center' }; }
anurag saini6y ago
Keep posted such content so that others can grow as well.
- Vikas Jha6y ago
  Thanks for good words, I will :)
anurag saini6y ago
Very well explained. thanks for the informative content.