Topic: i want to add a smal graph in my react datatable

Zubair Kamboh free asked 2 years ago

Expected behavior

Actual behavior

Resources (screenshots, code snippets etc.)

Krzysztof Wilk staff answered 2 years ago


You can inject a JSX in your row to add a graph in a cell. I.e.:

const [advancedData, setAdvancedData] = useState({
columns: [
  { label: 'Name', field: 'name', sort: true },
  { label: 'Position', field: 'position', sort: false },
  { label: 'Office', field: 'office', sort: false },
  { label: 'Age', field: 'age', sort: false },
  { label: 'Start date', field: 'date', sort: true },
  { label: 'Salary', field: 'salary', sort: false },
rows: [
    name: <span className='small'>Tiger Nixon</span>, //here is an injection
    position: 'System Architect',
    office: 'Edinburgh',
    age: 61,
    date: '2011/04/25',
    salary: '$320,800',

If you need a graph in another place I'm afraid we don't support that by default. You can use an useEffect hook and append your graph in the place you want but we don't guarantee it will work.

Keep coding!

Please insert min. 20 characters.


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



Specification of the issue

  • User: Free
  • Premium support: No
  • Technology: MDB React
  • MDB Version: MDB5 2.2.0
  • Device: web
  • Browser: chrome
  • OS: windows 10
  • Provided sample code: No
  • Provided link: No