React-table: Using multiple accessor properties

[wsfuller]

What version of React-Table are you using?

• 6.7.4

What bug are you experiencing, or what feature are you proposing?

Unable to have multiple accessors when rendering a column. Need a way where I can take in multiple properties, run a function check the length of the argument and render the UI accordingly.

What are the steps to reproduce the issue?

Data:

{
  name: "Sarah",
  prop1: {edges: [node:{id: 1}, node: {id: 2}]},
  groupProp1: {edges: [node:{id: 1}],
  groupProp2: {edges: [node:{id: 1}, node:{id: 2}]},
}

Render Columns:

const columns=[
  {
    Header: 'Name',
    accessor: 'name'
  },
  {
    Header: 'Prop1',
    accessor: 'prop1'
    Cell: props => <div>{renderFunc(props.value, arg)}</div>
  }
  {
    Header: 'Group Prop',
    accessor: ['groupProp1', 'groupProp2'] <<<<<< Need to access multiple properties
    Cell: props => <div>{renderFunc(props.value, arg)}</div> <<<<<< Pass in those properties
  }
]

What I need to do is access both groupProp1 and groupProp2 and pass that into my renderFunc to grab the edges.length and render elements accordingly. So far I haven't found a way where you can pass in multiple properties in the accessor. Looking through the documentation I don't see any examples of this

[gary-menzel]

An accessor can be a function that gets the whole row. Cell gets more in the props than just the value (there is a row and original - which contain row information). Check the doco. Also please consider joining #react-table on Slack (badge at the top of the README in the doco) for these implementation type questions. Thanks.

[yairEO]

Basically, as I understand it, the value in the accessor doesn't even matter if the cell is to be filled with multiple values or different properties in the data.. This is very weird.

Example:

const columns = [
    {
        Header   : 'Name',
        accessor : 'name' 
    },
    {
        Header   : 'Contacts',
        accessor : 'email', // <--- this can be any property of the data, doesn't even matter
        Cell     : props =>
            <Fragment>
                <span className='number'>{props.original.phone}</span>
                <span className='email'>{props.original.email}</span>
            </Fragment>
    }
];

[tannerlinsley]

It matters for sorting and grouping.
On Sat, Sep 1, 2018 at 3:58 AM vsync [e-mail] wrote:

Basically, as I understand it, the value in the accessor doesn't even
matter if the cell is to be filled with multiple values or different
properties in the data.. This is very weird.
Example:

const columns = [
{
Header : 'Name',
accessor : 'name'
},
{
Header : 'Contacts',
accessor : 'email', // <--- this can be any property of the data, doesn't even matter
Cell : props =>

{props.original.phone}
{props.original.email}

}
];

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/react-tools/react-table/issues/648#issuecomment-417847640,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AFUmCU4QKt6gPyY0iSg92W-tufDbqtkuks5uWlpBgaJpZM4QsjU6
.

[yairEO]

yes obviously it's for sorting, but most cases a mix-content cell should not be allowed to be sorted because it isn't clear what exactly does it sort it by.

For my example above, the "contacts" column cannot be sorted because it contains a phone & email values (and possibly more, like social media links or whatever) and then it makes perfect sense to simply setting the accessor to an empty string, because why bother putting anything for a column that should not be sorted.

[tannerlinsley]

Just don't use an accessor then. You can render anything from the original
row in your Cell component without it.
On Sat, Sep 1, 2018 at 10:37 AM vsync [e-mail] wrote:

yes obviously it's for sorting, but most cases a mix-content cell
should not be allowed to be sorted because it isn't clear what exactly does
it sort it by.

For my example above, the "contacts" column cannot be sorted because it
contains a phone & email values (and possibly more, like social media
links or whatever) and then it makes perfect sense to simply setting the
accessor to an empty string, because why bother putting anything for a
column that should not be sorted

—
You are receiving this because you commented.

Reply to this email directly, view it on GitHub
https://github.com/react-tools/react-table/issues/648#issuecomment-417871319,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AFUmCVDRc3ipTuXsZpwr3M9PTcNDyqEeks5uWre3gaJpZM4QsjU6
.

[shubhammishra13]

I had an issue in which i need to give a csv download option to the table but certain columns are being rendered with the Cell prop with no accessor for it.How can i get that data?Does adding a ref and getting hold of the instance of react-table would give me that?