Displaying SharePoint Data Into react-bootstrap-table-next

In this blog, you will learn how to display data into react-bootstrap-table-next into spfx web part.

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

1. To add react-bootstrap-table-next to solution, run the below command
   
   npm install react-bootstrap-table-next –save
   
   
2. Add @pnp/sp to solution, using the below command
   
   npm install @pnp/sp
   
   
3. 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.