Access nested properties with dataIndex

[queimadus]

Have you considered using something like https://github.com/mariocasciaro/object-path to parse dataIndex?

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",
  dataIndex: "custom.one"
}, {
  title: "My custom property two",
  dataIndex: "custom.two"
}]

Name	Age	My custom property one	My custom property two
John	25	1	2

[benjycui]

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

[afc163]

We need this, PR welcome~ @queimadus

[bodfaj13]

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

[khanakia]

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 ???

[haniamine]

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
}]

[khanakia]

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.

[haniamine]

@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),

[khanakia]

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

[rikinshah23]

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} />
    }
  },]

[khanakia]

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} />
    }
  },]

[rikinshah23]

@khanakia Thanks. That worked!

[rajkumarWebelight]

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

[fridolinf]

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

[khanakia]

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

[fridolinf]

@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