m3co/table3

(abandoned) table3 YA-tag that allows to work with tables based on D3js.org

Table3

Table tag for MDL/CE that allows you to work with tables.

Here'a a sort list of features we want to see:

• Sort
• Filter
• Column hide/unhide move via D&D
• CRUD
• Inline edit
• Multiple actions
• D&D ...
• And so on...

This tag is intended to work from mobile to big screens...

Let's stop dreaming, and beging to work! :)

Roadmap:

• Render data:
  • via JS
  • via HTML? does it have any sense?
• Manipulate info
  • Filter
  • Sort
• CRUD
  • Create via different methods like push, splice, length...
  • Update
  • Read
  • Delete

How to use

The tag var table = <x-table></x-table> has the following properties:

• data property: table.data = [ [x1, x2, x3...], [y1, y2, y3...] ...];

Render a table with values

x1  x2  x3...
y1  y2  y3...
...

• filter property: table.filter = "string";

Hide these rows which don't contain the string in their text.

• filtered property: table.filered;

Read-only array. Expose only the filtered values where filter is given by table.filter = "string";

• sort property:

table.sort = "column1,-column2";
table.sort = ["column1", "-column2"];
var sort = new Set();
sort.add("column1");
sort.add("-column2");
table.sort = sort;

This property accepts different formats in comformance with JSON API sorting.

• columns property:

table.columns = ['Column1', 'Column2', ... 'ColumnN'];

Notice that the columns variable is a Set.

Demo

Table in CE Table in WC

table3's Issues

Redefine the way to process all things here

We've currently three concepts

• The data
• The filter
• The sort

Let's imagine how we'd like to access them.

var table = document.querySelector('x-table');

// Let's render the columns
table.columns = ['col1', 'col2', 'col3', 'col4'];
// The expected format is an Array

// Let's render some data
table.data = [
  [1, 2, 3, 4],
  [2, 3, 4, 5],
  // ... and so on.
];
// The expected format is an Array of Array ~ Matrix

// Let's sort
table.sort = "col2,-col1";
// In conformance with JSONAPI.org sorting

// Let's filter
table.filter = "3"
// This would be just an string

// And... there're some restrictions!
// 1 - If you've a filtered array then
table.data[i][j] = "A new value"; // MUST throw an error

// 2 - If you've a sorted array then
table.data[i][j] = "A new value"; // MUST throw an error

Turn columns into a Set

It's just an idea that I'd like to explore. An array is not the best choice to hold the columns... Let's explore it.

Sorting is working almost correct

Take in count the order of click, what goes first is what should be sorted first....

Let's try to use D3 in this repo

Check this case... https://bl.ocks.org/boeric/e16ad218bc241dfd2d6e

Try another way to gather information from [...element.querySelectorAll(selector)]

I'm wondering if out there is another way to pack everything... maybe an iterator or something similar...

Split concerns. Filter has filtred, Data has data.

Let's suppose I've a big table with a data property table.data. Now, let's apply a filter by using table.filter = "abc". I suggest to NOT to modify table.data and expose the filtered data through table.filtered.

Write the docs

Tests are passing, but sorting is working incorrectly

Hold a copy of the original values, and by using these original values, do sorting and render them.

Let's consider two cases

1. Load an unsorted table, then add some values to this unsorted table, via splice or similar. It's obvious that the original table must be updated with these new values. Sorting can be done upon the original values and be restored when there's no parameters to sort.
2. Load an unsorted table, then sort the table, and finally add some values to this sorted table, via splice or similar. It's NOT obvious how to update the original table with these new values.

How to handle this situation?