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/gridjs@6.1.1/dist/gridjs.production.min.js"></script>
<script src="https://unpkg.com/gridjs@6.1.1/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

Uh oh!

Uh oh!

Row selection plugin shows no check boxes #1445

Uh oh!

{{title}}

Uh oh!

Replies: 2 comments 2 replies

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Uh oh!

Row selection plugin shows no check boxes #1445

Uh oh!

RuWi2210 May 22, 2024

Replies: 2 comments · 2 replies

Uh oh!

IzerkT May 26, 2024

Uh oh!

RuWi2210 May 27, 2024 Author

Uh oh!

slinaresperalta Jul 1, 2024

Uh oh!

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