Access nested properties with dataIndex about table HOT 15 CLOSED

I tried a lot of things but currently the only one that worked for me is using a "render" instead of
"dataIndex" at the columns.
render: (record) => record.object.attribute

so i'm suggesting this:

const data = [{
  name: "John", 
  age: 25 , 
  custom: {
    one: 1, 
    two: 2
  }
}]

const columns = [{
  title: "Name",
  dataIndex: "name"
}, {
  title: "Age",
  dataIndex: "age"
}, {
  title: "My custom property one",
 render: (record) => record.custom.one
}, {
  title: "My custom property two",
render: (record) => record.custom.two
}]

from table.

You are doing wrong. Do this way

const columns = [
  {
    title: 'image',
    dataIndex: ['notificationImage', 'url'],  // This is what changed
    key: 'notificationImage.url',
    render: (record) =>
    //console.log(text, record && record.notificationImage && record.notificationImage.url, index)
    {
      record && record.notificationImage &&
        <img
          width="460" height="345"
          src={record.notificationImage.url} />
    }
  },]

from table.

@khanakia For sorting it's the same thing, you need to add sorter to columns:

{
    title: "My custom property one",
    sorter: (a, b) => a.custom.one-b.custom.one,
    render: (record) => record.custom.one,
  }

if your column had string values:

sorter: (a, b) => a.custom.one.localeCompare(b.custom.one),

from table.

Or https://github.com/benjycui/exist.js 😅

from table.

We need this, PR welcome~ @queimadus

from table.

This should help
https://ant.design/components/table/#Migrate-to-v4

from table.

I cannot sort the tables anymore because it sends the fields like this now
sortField: ["serviceType", "title"]
but I need it to the like this
sortField: ["serviceType.title"]

So how to do that ???

from table.

I tried a lot of things but currently the only one that worked for me is using a "render" instead of
"dataIndex" at the columns.
render: (record) => record.object.attribute

so i'm suggesting this:

const data = [{
  name: "John", 
  age: 25 , 
  custom: {
    one: 1, 
    two: 2
  }
}]

const columns = [{
  title: "Name",
  dataIndex: "name"
}, {
  title: "Age",
  dataIndex: "age"
}, {
  title: "My custom property one",
 render: (record) => record.custom.one
}, {
  title: "My custom property two",
render: (record) => record.custom.two
}]

You are giving the solution to render the value. But I was talking about sortField when you click on the Sorting Icon in Table Header then it sends the value like that as I said above.

from table.

Ah, i see. I will give it a try. :) Thanks

from table.

How to approach when trying to render an image?
I am trying below but its not showing image.

const columns = [
  {
    title: 'image',
    dataIndex: 'notificationImage.url',
    key: 'notificationImage.url',
    render: (record) =>
    //console.log(text, record && record.notificationImage && record.notificationImage.url, index)
    {
      record && record.notificationImage &&
        <img
          width="460" height="345"
          src={record.notificationImage.url} />
    }
  },]

from table.

@khanakia Thanks. That worked!

from table.

What when you search data {firstName+lastName} in Table column

from table.

sorry may i ask. how to display it if the row name is the same, if i match it it will output like this

so I want get the name of product

but user hame same name

I want get the value name of product and user

from table.

@fridolinf it seems record.product is NULL please double check the DATA you are passing to the table.

from table.

@fridolinf it seems record.product is NULL please double check the DATA you are passing to the table.

thank you for answering my question. I solved the problem

from table.