`  {
           (this.state.categoryTable)?(
             <table id="categoryData" className="display" cellSpacing={0} width="100%">
                  <thead>
                    <tr>
                      <th className="no-sort" style={{textAlign: 'center'}}>Icon</th>
                      <th style={{textAlign: 'center'}}>{this.state.type} name</th>
                      <th className="no-sort"></th>
                      <th className="no-sort"></th>
                    </tr>
                  </thead>
                  <tbody>
                  {
                      (this.state.categories.length > 0)?(

                              this.state.categories.map((category,key) => {


                                     return      <tr style={{height: 40}}>

                                            <td style={{textAlign: 'center'}}>
                                                <img src={category.image} id="headerProfilePic" style={{width: '50', height: '50',cursor: 'pointer',margin: 'auto'}} className="img-responsive" />
                                            </td>
                                            <td style={{textAlign: 'center'}}>{category.name}</td>


                                            <td className="col-md-2 col-sm-6" >
                                              <span className="btn btn-primary" type="button" id="postComment" style={{marginLeft: 10}} onClick={this.editAddModal.bind(this,category._id,category.name,category.image)}>
                                                <span style={{fontFamily: 'verdana',fontSize: 12}} >EDIT</span>
                                              </span>
                                            </td>

                                            <td className="col-md-2 col-sm-6" >

                                              {
                                                   (category.isDelete)?(
                                                     <span className="btn btn-success" type="button" id="postComment" style={{marginLeft: 10}} onClick={this.selectDeleteCategory.bind(this,category._id,category.isDelete)}>
                                                       <span style={{fontFamily: 'verdana',fontSize: 12}} >ACTIVATE</span>
                                                     </span>
                                                   ):(
                                                     <span className="btn btn-danger" type="button" id="postComment" style={{marginLeft: 10,width: 85}} onClick={this.selectDeleteCategory.bind(this,category._id,category.isDelete)}>
                                                       <span style={{fontFamily: 'verdana',fontSize: 12}} >DELETE</span>
                                                     </span>
                                                   )
                                              }

                                            </td>



                                          </tr>
                              })
                      ):( null )
                  }

                  </tbody>
                 </table>

           ):(null)
      }

`

`

$('#categoryData').DataTable( {
              "order": [],
              "columnDefs": [
                { "targets": 'no-sort',"orderable": false},
                  { targets: [1], searchable: true },
                  { targets: '_all', searchable: false } ]
          } );`