none
Updating the css for Datatable in react js spfx webpart. RRS feed

  • Question

  • Hi i used the datatable in my SPFX react js as shown in the below.

    ------------------------------------------------------------------------------------------------

    <div >
    <div >
    <div >
    <table ref='table' className="stripe dataTable">
    </table>
    </div>
    </div>

    ---------------------------------------------------------------

    and ouput is as shown in below :

    ---------------------------------------------------------------

    ------------------------------------------------------------------

    I want to apply blue color for back ground and font color white only for header how can i apply?

    Monday, December 2, 2019 5:09 AM

Answers

  • Hi Rajesh,

    Please check if you are missing the code snippet below.

    componentDidUpdate() {  
        $.extend($.fn.dataTable.defaults, {  
          responsive: true  
        });  
        $("#SpfxDatatable").DataTable();
    }

    Best Regards,

    Dennis


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

    Tuesday, December 3, 2019 9:34 AM
    Moderator

All replies

  • Hi Rajesh,

    Please modify the table html as below.

    <table ref='table' className="stripe dataTable">
    	<thead>
    		<tr style="background-color:blue;color:white">
    			<th>User</th>
    			<th>Organization</th>
    			<th>Sub Organization</th>
    			<th>Details</th>
    		</tr>
    	</thead>    
    </table>

    Or add the style below into .scss file in SPFx solution.

    .datatableThead{
    	background-color:blue;
    	color:white;
    }

    Then use the code below.

    <table ref='table' className="stripe dataTable">
    	<thead>
    		<tr className={styles.datatableThead}>
    			<th>User</th>
    			<th>Organization</th>
    			<th>Sub Organization</th>
    			<th>Details</th>
    		</tr>
    	</thead>    
    </table>

    More information:

    Migrate jQuery and DataTables solution built using Script Editor web part to SharePoint Framework

    Best Regards,

    Dennis


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

    Monday, December 2, 2019 8:22 AM
    Moderator
  • Hi Dennis

    In the below i am not writing tr td inside the table tag. I am not mentioning the headers here.

    --------------------------------------------------------------------------------------------------------------

    <div >
    <div >
    <table ref='table' className="stripe dataTable">
    </table>
    </div>
    </div>

    ---------------------------------------------------------------------------------------------------

    Headers code :

    -------------------------------------------------------------------------------------------

    pnp.sp.web.lists.getByTitle('TableList').items.filter("Title eq "+currentPageName+"").getAll().then(values => {
    var jsonArray = values.map(function (i) {
    return [
    i.user,
    i.Org,
    i.SubOrg,
    i.Details
    ];
    });
    var table = $(this.refs.table).DataTable({
    data: jsonArray,
    columns: [
    { title: "User" },
    { title: "Organization" },
    { title: "Sub Organization" },
    { title: "Details" },
    ]
    });
    });

    --------------------------------------------------------------------------

    In this case how can we apply css for header

    Monday, December 2, 2019 8:26 AM
  • Hi Rajesh,

    I mean you can add the thead in the table and add the custom css style for this thead. Please add it and check if it works.

    The following article for your reference.

    https://www.c-sharpcorner.com/article/responsive-datatable-with-spfx-including-export-buttons/

    Best Regards,

    Dennis


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.



    Monday, December 2, 2019 9:33 AM
    Moderator
  • Hi Rajesh,

    Did you solve this issue?

    Best Regards,

    Dennis


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

    Tuesday, December 3, 2019 8:53 AM
    Moderator
  • Hi Dennis,

     I used the above code and reference also but i am not able to get the show entries and search field and paging.

    <div>
    <table className="stripe dataTable" id='SpfxDatatable'>
    <thead>
    <tr>
    <th>Key User</th>
    <th>Using Organization</th>
    <th>Using Sub Organization</th>
    <th>Details</th>
    </tr>
    </thead>
    <tbody id='SpfxDatatableBody'>
    {this.state.lists && this.state.lists.map((item, i) => {
    return [
    <tr key={i}>
    <td>{item.keyuser}</td>
    <td>{item.usingOrg}</td>
    <td>{item.usingSubOrg}</td>
    <td>{item.Details}</td>
    </tr>
    ];
    })}
    </tbody>
    </table>
    </div>

    Tuesday, December 3, 2019 8:56 AM
  • Hi Rajesh,

    Did you bind the jQuery datatable in componentDidUpdate() method?

    Best Regards,

    Dennis


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

    Tuesday, December 3, 2019 9:27 AM
    Moderator
  • I am able to get the data just like a table but i am not able to get the select pages option search option and paging option
    Tuesday, December 3, 2019 9:30 AM
  • Hi Rajesh,

    Please check if you are missing the code snippet below.

    componentDidUpdate() {  
        $.extend($.fn.dataTable.defaults, {  
          responsive: true  
        });  
        $("#SpfxDatatable").DataTable();
    }

    Best Regards,

    Dennis


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

    Tuesday, December 3, 2019 9:34 AM
    Moderator
  • Hi Dennis,

    Thats working fine now.

    But i want apply padding to th & td and spacing between search button and table ?

    how can we do it?

    Tuesday, December 3, 2019 11:40 AM
  • When i open the page its showing as shown below

    when i go to next tab and coming back to this tab its showing as shown in below.

    How can i achieve look and feel as shown in second pic at the time of loading the page.

    Tuesday, December 3, 2019 11:55 AM
  • Hi Dennis,

    I updated with the above code. In my webpart i have 2 tabs Tab1 & Tab2 but when i open the page by default Tab1 opens at that time data table is loading and its showing the  the data without restricting only 10 items per page and css also not poperly aligned if i click Tab2 and coming back to Tab1 then its showing paging properly with each page 10 items and css also aligned properly.

    If i click on Tab2 and coming back to Tab1 i can see paging applied as shown in below

    My code :

    -----------------------------------------------------------------------------------------------------------------------

    <div>
    <table className='table-responsive table table-striped table-bordered dt-responsive nowrap display' id='SpfxDatatable'>
    <thead>
    <tr>
    <th>Key User</th>
    <th>Using Organization</th>
    <th>Using Sub Organization</th>
    <th>Details</th>
    </tr>
    </thead>
    <tbody id='SpfxDatatableBody'>
    {this.state.lists && this.state.lists.map((item, i) => {
    return [
    <tr key={i}>
    <td>{item.keyuser}</td>
    <td>{item.usingOrg}</td>
    <td>{item.usingSubOrg}</td>
    <td>{item.Details}</td>
    </tr>
    ];
    })}
    </tbody>
    </table>
    </div>

    ------------------------------------------------------------------------------------------------------

    Code:

    -----------------------------------------------------------------------------------------------------

    public componentDidMount() {
    $.extend($.fn.dataTable.defaults, {
    responsive: true
    });

    $("#SpfxDatatable").DataTable();

    }

    Code 2:

    componentDidUpdate() {
    $.extend($.fn.dataTable.defaults, {
    responsive: true
    });
    $("#SpfxDatatable").DataTable();
    }

    -------------------------------------------------------------------------------------------------

    Did i miss anything?

    Wednesday, December 4, 2019 5:38 AM
  • Hi Rajesh,

    Please check my reply in your post here:

    https://social.technet.microsoft.com/Forums/en-US/d9e7f703-7617-42a0-8bdc-969b9ab5a5a4/datatable-data-is-disappearing-when-i-moved-to-one-tab-to-another-in-spfx-react-webpart?forum=sharepointdevelopment&prof=required

    Best Regards,

    Dennis


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

    Wednesday, December 4, 2019 8:02 AM
    Moderator
  • I am using PiviotItem in reactJS SPFX webpart.

    At the time of first time loading the datatable displaying all the data in one page instead of having pagination.

    Did i miss anything?

    Wednesday, December 4, 2019 8:06 AM
  • Hi Rajesh,

    I suggest you post one topic in one thread, so we or other community members could try to help you based on specific topic and help other community members find the helpful information based on topic quickly.

    Thanks for your understanding.

    Best Regards,

    Dennis


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

    Thursday, December 5, 2019 7:13 AM
    Moderator