asifyali free asked 5 years ago


My <th> classes are getting stripped off pl see below

<th class="">Date<i class="fa fa-sort float-right" aria-hidden="true"></i></th>

 

whereas the example has all these classes which i need.

 

 

<th class="th-sm sorting_desc" tabindex="0" aria-controls="dtBasicExample" rowspan="1" colspan="1" aria-label="Name
           
          : activate to sort column ascending" style="width: 138px;" aria-sort="descending">Name
            <i class="fa fa-sort float-right" aria-hidden="true"></i>
          </th>

 

I have no control over <th as i am declaring the datatable as:

<MDBDataTable
striped
bordered
hover
small
data={data}
order={['date', 'desc']}
info={true}
/>
Thanks for any help!!!

arjun Liqotech free commented 1 year ago

how to add a dropdown on the col in the table ?


Grzegorz Bujański staff answered 1 year ago


To use dropdown in datatable try this data:

const actionData = {
    columns: [
      { label: 'Name', field: 'name' },
      { label: 'Position', field: 'position' },
      { label: 'Office', field: 'office' },
      { label: 'Contact', field: 'contact', sort: false },
    ],
    rows: [
      {
        name: 'Tiger Nixon',
        position: 'System Architect',
        office: 'Edinburgh',
        phone: '+48000000000',
        email: 'tiger.nixon@gmail.com',
      },
    ].map((row) => {
      return {
        ...row,
        contact: (
          <>
            <MDBDropdown>
              <MDBDropdownToggle>Dropdown button</MDBDropdownToggle>
              <MDBDropdownMenu appendToBody="true">
                <MDBDropdownItem link>Action</MDBDropdownItem>
                <MDBDropdownItem link>Another action</MDBDropdownItem>
                <MDBDropdownItem link>Something else here</MDBDropdownItem>
              </MDBDropdownMenu>
            </MDBDropdown>
          </>
        ),
      };
    }),
  };

The most important thing is to use the appendToBody prop to make the dropdown display properly.


Shashank Tiwari free answered 4 years ago


Q.1 I want to ask that how we put search box at every column. Q. 2 How to change Position and CSS of Footer elements. I am naive in this please give me a proper way to do this.


Jakub Chmura staff commented 4 years ago

I need to redirect you to your thread. https://mdbootstrap.com/support/react/how-to-get-search-box-at-every-column-in-datatable/


Jakub Mandra staff answered 5 years ago


Hey, thanks for posting.

That brings the problem out - we should add attributes for table components, so they would be more controllable and customizable.

Unfortunately, for now it is not possible to add your custom attributes.



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB React
  • MDB Version: 4.8.4
  • Device: Web
  • Browser: Chrome
  • OS: Windows
  • Provided sample code: No
  • Provided link: No