0

I am using grid.js along with its selection plugin to have the user select specific rows in the table. An example of the script is shown below with a function that gets called when a button on the website is pushed.

const grid = new gridjs.Grid({
    columns: [
        { id: 'Checkbox', name: 'Details', plugin: { 
            component: gridjs.plugins.selection.RowSelection }
        },
        { id: 'letter', name: 'Letter' },
        { id: 'number', name: 'Number' }
    ],
    data: [
        ['A', 'one'],
        ['B', 'two'],
        ['C', 'three'],
        ['D', 'four'],
        ['E', 'five'],
        ['F', 'six']
    ],
    pagination: { limit: 3 }
}).render(document.getElementById('table'));

function getData() {
    console.log('rowSelection:', grid.config.store.state.rowSelection.rowIds);
    console.log('data', grid.config.store.state.data);
}

When the button is pushed the first console log correctly returns the IDs of the selected rows. This works even when the rows are on a previous (or following) page. That is, if the first row is picked on page 1 and the second row is picked on the second page, rowSelection.rowIds returns a two element list. However, state.data only returns the data of the page that is currently displayed. In the example above it will be either the first three or the last three rows. Ultimately, I would like to return the data in the table of the selected rows, for example, I might want to return 'A' and 'E'. Does anyone know how to use that list of selected rows to return data from those rows?

I haven't found a good example that combines row selection with pagination. I expected state.store to have access to all of the data, not just what is shown on the page.

Daniel Logan
  • 43
  • 1
  • 6

1 Answers1

0

With the caveat that I don't know JS, I have found a very poor way to get access to the full table and match the unique selection ids with the appropriate rows of the data table. The linkage between the unique row id and the table data is in the grid.config.pipeline.cache map. First you use grid.config.store.state.rowSelection.rowIds as in the code above. Then you need to get the unique id of the third element in the map because the value of that third element is where the unique row id and the table data is stored. Then, using that key/unique id, you can get access to all of the table rows and their unique row ids. Finally, you can loop through the rows until you match with the unique ids stored in selectedIds.

var selectedIds = grid.config.store.state.rowSelection.rowIds;
var key = Array.from(grid.config.pipeline.cache.keys())[2];
var tableData = grid.config.pipeline.cache.get(key).rows;
for (let i = 0; i < selectedIds.length; i++) {
    for (let j = 0; j < tableData.length; j++) {
        if (selectedIds[i] == tableData[j].id) {
            console.log('Match: ', selectedIds[i], tableData[j].cells[1].data, tableData[j].cells[2].data)
        };
    };
};

Admittedly, this does not seem like the best solution and most likely doesn't scale well, but it is the best I have for now.

Daniel Logan
  • 43
  • 1
  • 6