MDBDatatable

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.

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.

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.