Row selection plugin shows no check boxes #1445

RuWi2210 · 2024-05-22T10:07:20Z

RuWi2210
May 22, 2024

I am trying to make a table with a checkbox column as illustrated in this example.
It is a part of a project that i am writing in python using Flask.

However, when i render the HTML file the table shows up with just an empty column where the checkboxes should be.
I have created a minimal example to illustrate the issue:

<!doctype html>
<html>
  <head>
    <!-- Table styling -->
    <link rel="stylesheet" href="https://unpkg.com/gridjs/dist/theme/mermaid.min.css"/>
  </head>

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

    <!-- Import gridjs and selection plugin -->
    <script src="https://unpkg.com/gridjs/dist/gridjs.umd.js"></script>
    <script src="https://unpkg.com/gridjs/plugins/selection/dist/selection.umd.js"></script>
    
    <script>
    //   Define table columns and data
      new gridjs.Grid({
        columns: [
          { id: 'Checkbox', name: 'Select', plugin: {component: gridjs.plugins.selection.RowSelection}},
          { id: 'first_name', name: 'First Name' },
          { id: 'last_name', name: 'Last Name' },
          { id: 'instrument', name: 'Instrument'}
        ],
        
        data: [
            {
                first_name: 'Paul',
                last_name: 'McCartney',
                instrument: 'Bass'
            },
            {
                first_name: 'John',
                last_name: 'Lennon',
                instrument: 'Guitar/Piano'
            },
            {
                first_name: 'Ringo',
                last_name: 'Starr',
                instrument: 'Drums'
            },
            {
                first_name: 'Geroge',
                last_name: 'Harrison',
                instrument: 'Guitar'
            }
        ],
        width: 1000
      }).render(document.getElementById('fab_four_table'));
    </script>
  </body>
</html>

I have noticed, that when i "inspect" the pages, the checkbox cells in the working example from the documentation looks like this:

Whereas in the table that i have rendered the checkbox cell looks like this:

I.e. the cell in my table is missing an input sub-element, but i cannot figure out why.

Any help i greatly appreciated!

IzerkT · 2024-05-26T12:32:23Z

IzerkT
May 26, 2024

Hello, I have same issue. Did you find any solution?

1 reply

RuWi2210 May 27, 2024
Author

No, unfortunately i have not found a solution yet.

slinaresperalta · 2024-07-01T14:54:15Z

slinaresperalta
Jul 1, 2024

I also have the same exact issue.

1 reply

choudharypranay Jul 14, 2024

I found a workaround. This is broken in 6.2.0 version. So to revert to previous working version use the following:
<script src="https://unpkg.com/[email protected]/dist/gridjs.production.min.js"></script>
<script src="https://unpkg.com/[email protected]/plugins/selection/dist/selection.umd.js"></script>

Note that 7 issues were fixed in version 6.2.0 (release notes: https://github.com/grid-js/gridjs/releases/tag/6.2.0) which might be another problem!

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Row selection plugin shows no check boxes #1445

{{title}}

Replies: 2 comments 2 replies

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

Row selection plugin shows no check boxes #1445

RuWi2210 May 22, 2024

Replies: 2 comments · 2 replies

IzerkT May 26, 2024

RuWi2210 May 27, 2024 Author

slinaresperalta Jul 1, 2024

choudharypranay Jul 14, 2024

RuWi2210
May 22, 2024

Replies: 2 comments 2 replies

IzerkT
May 26, 2024

RuWi2210 May 27, 2024
Author

slinaresperalta
Jul 1, 2024