nano-buckets/resources/js/components/users.riot

<app-users>
    <div class="buckets">
        <table class="table">
            <tbody>
                <tr each={ user in state.users }>
                    <td class="table__td">
                        { user.display_name }
                    </td>
                    <td class="table__td">
                        { user.email }
                    </td>
                    <td class="table__td">
                        { user.is_admin }
                    </td>
                    <td class="table__td">
                        <button class="button button--small m-bottom-0 m-right-3">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="/symbol-defs.svg#icon-edit"></use>
                            </svg>
                        </button>
                        <button class="button button--small m-bottom-0" type="button">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="/symbol-defs.svg#icon-delete"></use>
                            </svg>
                        </button>
                    </td>
                </tr>
            </tbody>
        </table>
        <div class="grid" if={ state.maxLength > state.users.length }>
            <div class="col-12">
                <div class="buckets__more">
                    <button type="button" class="button" onclick={ handleClick }>
                        More
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="/symbol-defs.svg#icon-arrow-down"></use>
                        </svg>
                    </button>
                </div>
            </div>
        </div>
    </div>
    <script>

        import axios from 'axios'
        import remove from 'lodash.remove'

        /**
         *
         *
         *
         *  @author Björn Hase
         *
         */

        export default {

            state: {
                users: [],
                maxLength: 0
            },

            onBeforeMount() {
                this.fetch()
            },

            handleClick() {

            },

            handleDelete(event, bucket) {
                event.preventDefault()

                axios.delete('/api/bucket/' + bucket._id)
                    .then((response) => {

                        // removing from buckets
                        remove(this.state.buckets, function(b) {
                            return b._id === bucket._id
                        })

                        this.update()
                    })
            },

            /**
             *  getting all buckets
             *
             *
             */
            fetch() {
                axios.get('/api/users').then((response) => {
                    this.state.users = response.data.data
                    this.update()
                })
            }
        }

    </script>
</app-users>