Material-table: Unable to sort when using render property in columns

[aswamina]

I used render in the columns because I wanted to concatenate firstname and lastname. Here is the code example :
const columns = [
{
title: 'Name',
type: 'string',
render: rowData => rowData.first_name + ' ' + rowData.last_name,
searchable: true,
cellStyle: {fontSize: 14}
},
However, once I do this, when I search by either first name or last name the search shows No results found. I had this working earlier by writing my own function to compute a name which was the concatenation of first_name and last_name and then using the 'field: ' instead of the 'render' above. Is there a bug regarding losing searching when using the render ? Also lost the ability to sort once I used the render function. That does not work either.

[mbrn]

There is no bug but it can not search/sort in your render result. Because it could be react component or string. I added customSearch feature and i will add customSort function feature. You can do something like this:

<MaterialTable          
          columns={[
            { title: 'Adı', render: rowData => 'some text', customSort: (a, b) => return a - b },
            { title: 'Doğum Yılı', field: 'birthYear', type: 'numeric' },
            { title: 'Doğum Yeri', field: 'birthCity', lookup: { 34: 'İstanbul', 63: 'Şanlıurfa' } }
          ]}
          data={this.state.data}
          title="Demo Title"
        />

But in 1.13.0 version of course.

[aswamina]

Thanks Mehmet. Will wait for 1.13.0 to use the customSort. Hopefully that
will be soon.

BTW, I felt that using render was better, than the way I was doing it,
which was initalizing a new array with the same fields as the old array,
except for name which was the concatenation of first_name and last_name and
then passing this new array to the data property of MaterialTable.

On Wed, Jan 9, 2019 at 8:43 AM Mehmet Baran [e-mail]
wrote:

There is no bug but it can not search/sort in your render result. Because
it could be react component or string. I added customSearch feature and i
will add customSort function feature. You can do something like this:

      columns={[

        { title: 'Adı', render: rowData => 'some text', customSort: (a, b) => return a - b },

        { title: 'Doğum Yılı', field: 'birthYear', type: 'numeric' },

        { title: 'Doğum Yeri', field: 'birthCity', lookup: { 34: 'İstanbul', 63: 'Şanlıurfa' } }

      ]}

      data={this.state.data}

      title="Demo Title"

    />

But in 1.13.0 version of course.

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/mbrn/material-table/issues/146#issuecomment-452756747,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AIva_YyRLfs5KASO3iH8Kek0pFTJfKWhks5vBhwYgaJpZM4Z3rNH
.

--
Anand Swaminathan

[martindeanlund]

Yeah, the Search, Filter, and Sort functionality on a table should be based on the data governing the table, not the potentially rendered object in most cases. Render is for display transformations, generally, but the purpose of a Table is to govern the logical display of tabular data - so the data always takes precedence.

[mbrn]

@aswamina I will publish it in a few days.

@martindeanlund You are right. As default behavior the table works as you said. But developer can change the search, filter and sort algorithm. Not just rendered columns. You can sort a column according your speacial algorithm.

[martindeanlund]

I think the point here is that by Default sorting, searching, and filtering behavior should always be applied based on the RowData element used for that column, not the result of the Render() function or a the absence of Render.

If a developer is using a Render function to computer / transform the relevant Data into other Data then he or she is writing code in the wrong place. Separation of concerns suggests such things get done before the data hits the table. The Render() function on a column is the place for display transformation (String or Number into display objects / containers), not data transformation.

RowData should generally be immutable and default as the key for Filter / Sort / Search regardless of what happens in the Render function. Filters / Sorts / Searches on rendered columns' states is the part that a developer would need to write custom.

[aswamina]

Ok in that case the best way for me is to construct an array with the data
in my constructor because I have the data available via props and then pass
that array to the material table ? Do you agree ?

On Wed, Jan 9, 2019 at 3:21 PM martindeanlund [e-mail]
wrote:

Yeah, the Search, Filter, and Sort functionality on a table should be
based on the data governing the table, not the potentially rendered object
in most cases. Render is for display transformations, generally, but the
purpose of a Table is to govern the logical display of tabular data - so
the data always takes precedence.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/mbrn/material-table/issues/146#issuecomment-452843197,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AIva_blw0eVCMHQG5T-TpePUqoTlWtx1ks5vBlydgaJpZM4Z3rNH
.

>

Anand Swaminathan

[aswamina]

Any idea when 1.13 will be released ?

[mbrn]

I hope today or tomorrow.

[mbrn]

This is ok and version 1.13.0 is ready to download.

[aswamina]

Thanks Mehmet. I noticed that issue#147 is still present and i am getting
warnings in my console

On Mon, Jan 14, 2019 at 12:33 AM Mehmet Baran [e-mail]
wrote:

This is ok and version 1.13.0 is ready to download.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/mbrn/material-table/issues/146#issuecomment-453930097,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AIva_dZyqO6tn0mZ0EfoGDpL1MK1W2apks5vDEC8gaJpZM4Z3rNH
.

>

Anand Swaminathan

[jakeleventhal]

Does the customSort prop just sort based on whatever is rendered?
I feel like this doesn't quite make sense if what is being rendered is more than just a string.

For example, my tables use rendering to show images and several data attributes in one column. There should be a way to custom sort columns based on attributes.

So @aswamina should be able to pass in a list of data points that it should sort in order.

So if the user does customSort: ['firstName'] it will just sort by first name. If the user does customSort: ['firstName', 'lastName'] it will sort first by firstName and then by lastName. This seems to make the most sense to me.