gridjs Selection plugin: *select all* checkbox in the table header

I would love a main checkbox to select/unselect several rows at a time.

When the selection plugin is used, a (de)select all checkbox in the header would be awesome. If checked it would check all the checkboxes (and select all the rows), if unchecked it would unselect all the rows. If some rows are selected and other are not, the checkbox would appear undeterminate.

I am not sure if this checkbox would need to check only the items on the current page, or all the items available. I suppose both case can be useful, maybe this can be made an option?

What do you think?

Apr 29 '22 12:04 azmeuk

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

Jul 10 '22 02:07 stale[bot]

Please stale bot, let this issue opened.

Jul 10 '22 16:07 azmeuk

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

Sep 20 '22 19:09 stale[bot]

@stale bot, please leave this ticket alone :)

Sep 21 '22 08:09 azmeuk

I am glad to have found this thread! Because I, too, am hunting down a way to make this feature possible!

Thanks for the great package :)

Feb 02 '23 01:02 aaronsmulktis

Any updates? It seems like it's stuck on stale, I need this feature as well :')

Feb 21 '23 07:02 VenatusSimpleX

hi guys, try this:

<body>
  <div id="wrapper"></div>

  <script>
    function toggle(cb){
      if(cb.checked == true) {
        for (var i = 0; i < grid.config.data.length; i++) {
          grid.config.data[i].isChecked = true; // change your property here
          grid.config.store.state.data.rows[i].cells[0].data = false; // trick for correct refill rowSelection.rowIds of selection plugin
        }
        grid.config.store.state.rowSelection.rowIds = []; // clear prev ids
        grid.forceRender();
        document.getElementById("allCheckbox").checked = true; // set it again after rendering
      } else {
          for (var i = 0; i < grid.config.data.length; i++) {
            grid.config.data[i].isChecked = false;
            grid.config.store.state.data.rows[i].cells[0].data = false;
          }
          grid.config.store.state.rowSelection.rowIds = [];
          grid.forceRender();
      }
    }
    
    const dataRows = [{
      isChecked: false,
      productName: "Some product 1",
      count: 15,
    },{
      isChecked: true,
      productName: "Some product 2",
      count: 20,
    },{
      isChecked: false,
      productName: "Some product 3",
      count: 6,
    }];
    
    const grid = new gridjs.Grid({
      columns: [
          {
            id: 'selectRow',
            name: gridjs.html('<input id="allCheckbox" type="checkbox" onclick="toggle(this);"/>'),
            data: (row) => row.isChecked, 
            plugin: {
              component: gridjs.plugins.selection.RowSelection
            }
          },
          { 
            name: 'Product',
            data: (row) => row.productName
          },
          { 
            name: 'Count',
            data: (row) => row.count
          }
      ],
      data: dataRows,
      style: {
        th: {
          'text-align': 'center'
        }
      }
    });

    grid.render(document.getElementById("wrapper"));
  </script>
</body>

Mar 31 '23 02:03 freehex

I have been searching for this feature as it would be highly beneficial. I have devised a quick but effective solution using jQuery. Within the "selectRow" column I have included a checkbox and added an event listener to handle changes.

inside new Grid({});

columns: [            
    {
        id: 'selectRow',
        name: html( '<input type="checkbox" name="custom_toggle" />' ),
            plugin: {
                component: RowSelection,
           },
        width: '60px;',
   }
    { /* other column */ }
    { /* other column */ }
    { /* other column */ }
];

And jQuery

$( document ).on( 'change', '[name="custom_toggle"]', function ( e ) {
    if ( $( this ).is( ':checked' ) ) {
        $( '.gridjs-tr' ).not( '.gridjs-tr-selected' ).find( '.gridjs-checkbox' ).click();
    } else {
        $( '.gridjs-tr-selected' ).find( '.gridjs-checkbox' ).click();
    }
} );

Apr 05 '23 06:04 Marin-Matosevic