none
i want to apply padding for datatable header and row in SPFX react webpart RRS feed

  • Question

  • I want to apply custom css to data table th and td in my react js SPFX webpart.

    Code ref:

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

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

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

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

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

    custom css:

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

    table>thead>tr>th{
    background-color: rgb(0,120,212);
    color: white;
    font-size: 12px;
    text-align: left;
    padding-left:3px;
    }
    table.stripe tbody td{
    padding-left:15px;
    }
    table.dataTable tbody td {
    padding-left:15px;
    }
    table {
    border: 1px solid black;
    width:100%;
    margin-top: 10px;
    }

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

    But this is not applying the padding

    Tuesday, December 3, 2019 5:03 AM

All replies

  • Hi,

    Put your custom CSS code out side of webpart css container.

    Sample demo(add !important if needed[CSS priority]):

    https://www.xul.fr/en/css/important.php




    Best Regards,

    Lee


    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 7:55 AM
  • In the above code i have 2 tabs if i am moving from tab1 to tab2 and coming to tab1 data in the datatable is emmpty how can we maintain the state in the above code?
    Tuesday, December 3, 2019 8:11 AM
  • Hi,

    For datatable tab issue, our support engineer had provide answer in your another thread, if you need further help, you could post your issue the in the thread.

    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

    It’s good practice to post ‘one topic 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,

    Lee


    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:53 AM
  • Hi Lee,

    Here i am not using reactDatatable i am using 

    import 'DataTables.net';


    Code :

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

    Code :

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

    In the  above dataTable i want to change margin for this class 'dataTables_filter' how can i apply?

    Thursday, December 5, 2019 4:41 AM
  • Hi

    ReactDataTable is my project/solution name.

    Share the code here for your reference.

    import * as React from 'react';
    import styles from './ReactDataTable.module.scss';
    import { IReactDataTableProps } from './IReactDataTableProps';
    import { escape } from '@microsoft/sp-lodash-subset';
    
    import { sp } from "@pnp/sp";
    import * as $ from 'jquery';
    import 'datatables.net';
    
    export interface IListItem{ 
      Id:number,
      Title:string,
      Description:string
    }
    
    export default class ReactDataTable extends React.Component<IReactDataTableProps, {}> {
      
      private async _getListData(): Promise<IListItem[]> {
        let items2 : Array<IListItem> = new Array<IListItem>();
        await sp.web.lists.getByTitle("TestList").items.select("Id", "Title","Description","Created").get().then((items: any[]) => {
          //console.log(items);
          items.forEach(item => {
            var typeItem:IListItem={Id:item.Id,Title:item.Title,Description:item.Description}
            items2.push(typeItem); 
          });      
        });
        this.setState({ listItems: items2 });
        return items2;    
      }
      public componentDidMount(){
        this._getListData().then(items=>{
          console.log(items);
        });
        sp.web.lists.getByTitle("MyList").items.getAll().then(values=> {
        var jsonArray =values.map(function (i) {
        return [
        i.Id,
        i.Title,
        i.IsDisplay,
        i.Created
        ];
        });
    
        var table =$(this.refs.table).DataTable({
        data: jsonArray,
        columns: [
        { title: "ID" },
        { title: "Title" },
        { title: "IsDisplay" },
        { title: "Created" },
        ]
        });
        });
      }
      public render(): React.ReactElement<IReactDataTableProps> {
        return (
          <div className={ styles.reactDataTable }>
            <div className={ styles.container }>
              <div className={ styles.row }>
                <div className={ styles.column }>
                  <span className={ styles.title }>Welcome to SharePoint!</span>
                  <p className={ styles.subTitle }>Customize SharePoint experiences using Web Parts.</p>
                  <table
                  ref='table'
                  className={ styles.dataTable }>
                  </table>
                </div>
              </div>
            </div>
          </div>
        );
      }
    }
    

    .reactDataTable {
      .container {
        max-width: 700px;
        margin: 0px auto;
        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);
      }
    
      .row {
        @include ms-Grid-row;
        //@include ms-fontColor-white;
        background-color: $ms-color-themeDark;
        padding: 20px;
      }
    
      .column {
        @include ms-Grid-col;
        @include ms-lg10;
        @include ms-xl8;
        @include ms-xlPush2;
        @include ms-lgPush1;
      }
    
      .title {
        @include ms-font-xl;
        @include ms-fontColor-white;
      }
    
      .subTitle {
        @include ms-font-l;
        @include ms-fontColor-white;
      }
    
      .description {
        @include ms-font-l;
        @include ms-fontColor-white;
      }
    
      .button {
        // Our button
        text-decoration: none;
        height: 32px;
    
        // Primary Button
        min-width: 80px;
        background-color: $ms-color-themePrimary;
        border-color: $ms-color-themePrimary;
        color: $ms-color-white;
    
        // Basic Button
        outline: transparent;
        
        font-family: "Segoe UI WestEuropean","Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",sans-serif;
        -webkit-font-smoothing: antialiased;
        font-size: $ms-font-size-m;
        font-weight: $ms-font-weight-regular;
        border-width: 0;
        text-align: center;
        cursor: pointer;
        display: inline-block;
        padding: 0 16px;
    
        .label {
          font-weight: $ms-font-weight-semibold;
          font-size: $ms-font-size-m;
          height: 32px;
          line-height: 32px;
          margin: 0 4px;
          vertical-align: top;
          display: inline-block;
        }    
      }
    }
    .dataTable{
      border: 1px
      solid black;      
      width:100%;      
      margin-
    }
    .dataTable>thead>tr>th{
      background-color: 
      rgb(0,120,212);      
      color: white;      
      font-size: 12px;      
      text-align: left;      
      padding-      
      }
      .dataTable tbody td {
      padding-
      }

    Best Regards,

    Lee


    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 9:01 AM