Skip to content

Add "group actions" feature #3

Description

@luverolla

Make the user able to select/unselect certain, or all, datatable's rows and make an action on them (such as deleting).
The following modification should be made:

  • each row will be uniquely identified by an id, either string or numeric, that will be used as action's parameter.
  • each row will have, as first cell, a checkbox that selects/unselects ONLY the entry represented by that row.
  • header row will have, as first cell, a checkbox that selects/unselects ALL entries.
  • if at least one entry is selected, an "action panel" should appear on top of the table, showing designed "group actions"

Group actions should be defined in component's markup, that would be modified, as following;

<div data-replace="jtable">
    <div data-table-actions>
        <div data-action-name="delete" data-action-href="/action/{id}">
            <!-- action button or link -->
        </div>
       <div data-action-name="delete with js" data-action-href="javascript:action('{id}')">
           <!-- action button or link -->
       </div>
    </div>
    <table>
        <!-- table headers -->
        <tbody>
            <tr data-id="20">
                <!-- entry's cells -->
            </tr>
        </tbody>
    </table>
</div>

The placeholder {id} have to be written as it is, it will be replaced by entry's id, as specified in the data-id attribute.
The cells with checkboxes will be generated by Javascript.

Metadata

Metadata

Assignees

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions