How to add a column which contains buttons related to the ro

Topic: How to add a column which contains buttons related to the rows?

Tinah free asked 3 years ago

Expected behavior I want a column in my data table that has a toggle button that can turn on/off the status of each user that is fetched from an api. Actual behavior I am only able to display the users correctly and not able to add a column to display the buttons. Resources (screenshots, code snippets etc.) import React,{ useState, useEffect } from 'react'; import { MDBDataTable,MDBTableEditable } from 'mdbreact'; import '@fortawesome/fontawesome-free/css/all.min.css'; import 'mdbreact/dist/css/mdb.css'; const DatatablePage = () => { const [data, setData] = useState([]) useEffect(() => { fetch("https://jsonplaceholder.typicode.com/users") .then(resp => resp.json()) .then(resp => { setData(resp) }) }, []) const columns = [ { label: "ID", field: "id",sort:'asc',width:10 }, { label: "Username", field: "username",sort:'asc' }, { label: "Name", field: "name",sort:'asc' }, { label: "Email", field: "email",sort:'asc' }, { label: "Phone", field: "phone",sort:'asc' }, { label: "Web Link", field: 'website',sort:'asc' } ] const arr = { columns:columns, rows:data }

return (

<MDBDataTable
  striped
  bordered
  hover
  responsive
  data={arr}
/>

); } export default DatatablePage;

Add comment

Tinah free answered 3 years ago

1 0 Best answer

Thanks a lot, it worked.

Wojciech Staniszewski staff commented 3 years ago

No problem, if you have more questions, go ahead :)

Tinah free commented 3 years ago

I also wanted to add an input form and a button just to the left of the search bar, is there a way I could do that? I mean, not an additional column but on the row containing the search bar.

Wojciech Staniszewski staff commented 3 years ago

Unfortunately, there is no such a possibility now. For now, you just have to add your form above the Datatable. We will think about adding this feature in the future.

Tinah free commented 3 years ago

Alright, I will do that. Thanks

Add comment

Wojciech Staniszewski staff answered 3 years ago

1 0 Best answer

<p>You could try to do it similar to this example, but use checkbox instead of buttons:</p>

<pre class="prettyprint"><code>import React, { useState } from 'react';
import { MDBDatatable, MDBBtn, MDBIcon } from 'mdb-react-ui-kit';

export default function App() {

const [actionData, setActionData] = useState({
    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',
      },
      {
        name: 'Sonya Frost',
        position: 'Software Engineer',
        office: 'Edinburgh',
        phone: '+53456123456',
        email: 'sfrost@gmail.com',
      },
      {
        name: 'Tatyana Fitzpatrick',
        position: 'Regional Director',
        office: 'London',
        phone: '+42123432456',
        email: 'tfitz@gmail.com',
      },
    ].map((row) => {
      return {
        ...row,
        contact: (
          <>
            <MDBBtn outline size='sm' floating className='call-btn' onClick={() => console.log(`call ${row.phone}`)}>
              <MDBIcon icon='phone' />
            </MDBBtn>
            <MDBBtn
              size='sm'
              floating
              className='message-btn ms-2'
              onClick={() => console.log(`send a message to ${row.email}`)}
            >
              <MDBIcon icon='envelope' />
            </MDBBtn>
          </>
        ),
      };
    }),
  });

return (
    <MDBDatatable hover data={actionData} advancedData />
  );
}
</code></pre>

Please insert min. 20 characters.

You could try to do it similar to this example, but use checkbox instead of buttons:

import React, { useState } from 'react';
import { MDBDatatable, MDBBtn, MDBIcon } from 'mdb-react-ui-kit';

export default function App() {

  const [actionData, setActionData] = useState({
    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',
      },
      {
        name: 'Sonya Frost',
        position: 'Software Engineer',
        office: 'Edinburgh',
        phone: '+53456123456',
        email: 'sfrost@gmail.com',
      },
      {
        name: 'Tatyana Fitzpatrick',
        position: 'Regional Director',
        office: 'London',
        phone: '+42123432456',
        email: 'tfitz@gmail.com',
      },
    ].map((row) => {
      return {
        ...row,
        contact: (
          <>
            <MDBBtn outline size='sm' floating className='call-btn' onClick={() => console.log(`call ${row.phone}`)}>
              <MDBIcon icon='phone' />
            </MDBBtn>
            <MDBBtn
              size='sm'
              floating
              className='message-btn ms-2'
              onClick={() => console.log(`send a message to ${row.email}`)}
            >
              <MDBIcon icon='envelope' />
            </MDBBtn>
          </>
        ),
      };
    }),
  });

  return (
    <MDBDatatable hover data={actionData} advancedData />
  );
}

Add comment

Closed

This topic is closed.

FREE CONSULTATION

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

Status

Closed

Specification of the issue

ForumUser: Free
Premium support: No
Technology: MDB React
MDB Version: MDB5 1.0.0-beta1
Device: Laptop
Browser: Chrome
OS: Windows 10
Provided sample code: No
Provided link: Yes

Tinah

17Support score
1Questions 1Answers 0Snippets