MDBDatatable

Topic: MDBDatatable

asifyali free asked 5 years ago

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

whereas the example has all these classes which i need.

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 ?

Add comment

Grzegorz Bujański staff answered 1 year ago

0 0 Best answer

To use dropdown in datatable try this data:

<pre class="prettyprint"><code>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>
 </>
 ),
 };
 }),
 };
</code></pre>

The most important thing is to use the <code>appendToBody</code> prop to make the dropdown display properly.

Please insert min. 20 characters.

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.

Add comment

Shashank Tiwari free answered 4 years ago

0 0 Best answer

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/

Add comment

Jakub Mandra staff answered 5 years ago