vue-action-table

    0.1.0 • Public • Published

    Vue Action Table

    An easy to use responsive table with the ability to add action buttons to each row.

    NPM version Known Vulnerabilities npm NPM downloads issues license Gitter

    Table of Contents

    Overview

    Vue Action Table focuses on two things: responsiveness and actions. This is all covered below but I wanted to cover that Veu Action Table is not a complete out of the box solution. What Vue Action Table doesn't provide is a styled table. Outside of the responsive bits it is a very basic table and you will need to provide your custom styling for it. I chose to not add styling because it varies from person to person and it would add unnecessary styles that would need to be overwritten.

    Installation

    To install Vue Action Table use:

    $ npm install vue-action-table

    Usage

    To use Vue Action Table, simply import it into the page or component you want to use it in.

    Below is a complete example of Vue Action Table usage and everything is briefly explained in comments but make sure to look further down at the props breakdown for a more detailed explanation.

    <template>
      <vue-action-table
        :rows="users"
        :actions="actions"
        actions-header="Actions"
        @promote="verifyUser"
        @delete="deleteUser"
      />
    </template>
    
    <script>
    import VueActionTable from 'vue-action-table';
    
    export default {
      components: {
        VueActionTable,
      },
      data() {
        return {
          /**
           * The users used to populate the table with.
           */
          users: [
            {
              name: "Bob",
              email: "bob@mail.com",
              dateCreated: "04/01/2020",
              role: "admin",
            },
            {
              name: "Joe",
              email: "joe@mail.com",
              dateCreated: "04/12/2020",
              role: "editor",
            },
            {
              name: "Amanda",
              email: "amanda@mail.com",
              dateCreated: "04/15/2020",
              role: "admin",
            },
            {
              name: "Jane",
              email: "jane@mail.com",
              dateCreated: "04/20/2020",
              role: "editor",
            },
          ],
    
          /**
           * The actions to add to the table. Here we have two actions: promote and delete.
           * Both of these actions have a font-awesome icon passed to them and the promote
           * action is set to only show on that row if the the user's `role` is an editor.
           */
          actions: [
            {
              name: "Promote",
              faIcon: ["fas", "check"],
              showIf: {
                key: "role",
                is: "editor",
              }
            },
            {
              name: "Delete",
              faIcon: ["fas", "trash"],
            }
          ]
        }
      }
    };
    </script>

    Props

    caption

    Optional. Adds a caption to the table in a <caption> tag.

    example:

    <vue-action-table caption="Users" />

    rows

    Required. An array of objects that represents the rows of data to add to the table.

    The headers are automatically created from the rows by taking the keys of each object and turning them from camelCase to separate words. For example, if there's a key named dateCreated, the header will be Date Created.

    example:

    <template>
      <vue-action-table :rows="users" />
    </template>
    
    <script>
    export default {
      data() {
        return {
          /**
           * The users used to populate the table with.
           */
          users: [
            {
              name: "Bob",
              email: "bob@mail.com",
              dateCreated: "04/01/2020",
              role: "admin",
            },
            {
              name: "Jane",
              email: "jane@mail.com",
              dateCreated: "04/20/2020",
              role: "editor",
            },
          ],
        }
      }
    }

    actions

    Optional. Actions are buttons that appear in the last column of every row. Actions at the minimum are just an array of text values for the buttons and at most are more complicated conditionals as seen below. Whenever an action button is clicked by the user, an event will be emitted with the action's name in lowercase. For example, if an action with the name of Edit is clicked, an event named edit will be emitted.

    A simple actions array can be:

    data() {
      return {
        ["Edit", "Delete"],
      }
    }

    While a more complex example is shown below:

    example:

    <template>
      <vue-action-table :rows="users" :actions="actions" />
    </template>
    
    <script>
    export default {
      data() {
        return {
          /**
           * The users used to populate the table with.
           */
          users: [
            {
              name: "Bob",
              email: "bob@mail.com",
              dateCreated: "04/01/2020",
              role: "admin",
            },
            {
              name: "Joe",
              email: "joe@mail.com",
              dateCreated: "04/12/2020",
              role: "editor",
            },
          ],
          /**
           * The actions for each row. Notice that the Delete button will only show
           * up on rows where the "role" is "editor".
           */
          actions: [
            {
              name: 'Edit',
            },
            {
              name: 'Delete',
              showIf: {
                key: "role",
                is: "editor"
              }
            }
          ]
        }
      }
    }
    </script>

    Notice that the Delete action has a special conditional. What it says is that the Delete button will only show if the value for the role of that row is editor. If it is editor, then the Delete button will show, otherwise it won't show for that row.

    actionsHeader

    Optional. The header label for the column that contains the row's actions.

    <template>
      <vue-action-table :rows="users" :actions="userActions" actionsHeader="Actions" />
    </template>
    
    <script>
    export default {
      data() {
        return {
          /**
           * The users used to populate the table with.
           */
          users: [
            {
              name: "Bob",
              email: "bob@mail.com",
              dateCreated: "04/01/2020",
              role: "admin",
            },
            {
              name: "Joe",
              email: "joe@mail.com",
              dateCreated: "04/12/2020",
              role: "editor",
            },
          ],
    
          /**
           * The actions to add to the table.
           */
          actions: ["Edit", "Delete"],
        }
      }
    }
    </script>

    tableClasses

    Adds one or more classes to the root table element.

    example:

    <template>
      <vue-action-table :rows="users" :tableClasses="userTableClasses" />
    </template>
    
    <script>
    export default {
      data() {
        return {
          /**
           * The classes to add to the table element.
           */
          userTableClasses: ["table", "table--users"],
    
          /**
           * The users used to populate the table with.
           */
          users: [
            {
              name: "Bob",
              email: "bob@mail.com",
              dateCreated: "04/01/2020",
              role: "admin",
            },
            {
              name: "Joe",
              email: "joe@mail.com",
              dateCreated: "04/12/2020",
              role: "editor",
            },
        }
      }
    }
    </script>

    Tests

    To run all of the tests available for Vue Action Table, use:

    $ npm run test:unit

    License

    MIT

    Install

    npm i vue-action-table

    DownloadsWeekly Downloads

    1

    Version

    0.1.0

    License

    MIT

    Unpacked Size

    27.5 kB

    Total Files

    13

    Last publish

    Collaborators

    • avatar