[EuiTable] Simplify example demo setup

[kartset]

I was trying to add column sorting to the table and I couldn't find a proper example to do it. The example in the demoJS refers to a file named data_store which I guess is exporting a hook 'createDataStore'. Initially, I couldn't find the data_store file as I didn't know where to look for it but then it occurred to me and I looked into the GitHub repository for it. I start reading the file to see the contents of the file and thought of copying the relevant code from it. But there I found references to other files like comparators.ts. I was wondering is there any other way or any other example to look at for sorting or do I just have to find all the relevant files and copy code from them?

[kartset]

@constancecchen @cchaos @thompsongl @miukimiu

[thompsongl]

Hey @kartset

The examples on the documentation website that use data_store are the only examples that this team maintains. Unfortunately that does mean tracing files in the repo. We've had discussions about providing better real world data in tabular component demos, so perhaps we could tie into that effort.

[cee-chen]

The example in https://elastic.github.io/eui/#/tabular-content/tables#adding-sorting-to-a-table is essentially changing the table data set to items based on how sorting changes. The reason why EuiBasicTable is so agnostic to the data going in/out is because this can be accomplished in a number of ways; you can use a Javascript Array.sort() function if you have a simple array of data (which is what our example/data_store is doing), or if you're using a database, then you can send the sort field and direction to your db and let the lower-level query language figure it out.

I definitely agree this isn't transparent and took me a bit to track down as well.

For out-of-the-box A-Z sorting, you could try using EuiInMemoryTable instead of EuiBasicTable - EuiInMemoryTable will handle sorting for you.

[elizabetdev]

+ 1 for @thompsongl suggestion:

We've had discussions about https://github.com/elastic/eui/issues/5470 in tabular component demos, so perhaps we could tie into that effort.

Also, to make sure the examples open in CodeSandbox.

[kartset]

Hi @thompsongl, Thanks for the response. I'll be waiting for better examples.

Hi @constancecchen, I am planning to send the sort field and direction to my DB so that the sorting can be applied across pages and not only on the current page. Now that I have some clarity about the way I have to approach the tables I'll figure out a way to achieve sorting in EuiTable About using EuiInMemoryTable, I have used EuiTable wherever I had to show the tabular data in the product that I am working on. Using EuiInMemoryTable will mean that I have to change it everywhere in the product which is another task in itself. But I may shift to the memory table in the future when I'll be working on improvements.

I agree with @miukimiu, as CodeSandbox examples are one of the ways which developers look for the implementation of a certain component.

[mxchinegod]

import { Comparators } from '../../../../src/services/sort';
import { Random } from '../../../../src/services/random';
import { times } from '../../../../src/services/utils';

All to fake data for a table.

Given that how this table is populated will be dramatically different, why make a whole tangled process to do it?

So happy to see this in Issues, it's been 2 days of wrangling this apart just so a table can work. I appreciate all the great work making EUI accessible but whew this is a frustrating reminder how a front-end ecosystem can make some steps forward and huge warp drives back.

But, on topic:

Tables throw this error, I think all of them but I've run out of time today to narrow down any faults in my code.

https://codesandbox.io/s/9eztek?file=/demo.js

This link of your own example is broken but appears to be different in nature, at least due to the sandbox vs local differences.

Edit: Error pictured is due to my use of Next.Js

[github-actions[bot]]

👋 Hey there. This issue hasn't had any activity for 180 days. We'll automatically close it if that trend continues for another week. If you feel this issue is still valid and needs attention please let us know with a comment.

[github-actions[bot]]

❌ We're automatically closing this issue due to lack of activity. Please comment if you feel this was done in error.

[cee-chen]

Definitely still valid