underwear / laravel-vue-good-table

Vue-good-table wrapper for Laravel. Server side tables without pain.
MIT License
41 stars 13 forks source link

Feature Add hidden to Column->jsonSerialize method and allow columns to be toggled #9

Closed jgulledge19 closed 2 years ago

jgulledge19 commented 2 years ago

This includes #8

Laravel/PHP

Add hidden to the Column->jsonSerialize method along with getters and setters for hidden + visible. Visible is the positive form of the property hidden, making it easier to read in code, but both will set the visibility of column in vue-good-table

Vue

Example useage


<laravel-vue-good-table
    data-url="/clients/table/data"
    config-url="/clients/table/config"
    :additional-server-params="additionalServerParams"
    ref="grid"
>
    <div slot="table-action-filters">
        <!-- This will show up on the top right of the table.-->
        <input name="failed" v-model="additionalServerParams.showFailed" type="checkbox" id="show_failed" @change="$refs.grid.onColumnFilter(additionalServerParams);">
        <label for="show_failed">Show Failed</label>
    </div>

    <template slot="table-row" slot-scope="props">
        <span v-if="props.column.field === 'created_at'">
            <small>{{props.formattedRow[props.column.field]}}</small>
        </span>
        <span v-else>
          {{props.formattedRow[props.column.field]}}
        </span>
    </template>

</laravel-vue-good-table>

<script>

import LaravelVueGoodTable from './../../VueGoodTable/LaravelVueGoodTable';
export default {
    name: "Index",

    components: {
        LaravelVueGoodTable,
        CrudActions
    },
    data() {
        return {
            additionalServerParams: {
                showFailed: null
            },
        }
    },
    methods: {
    }
}
</script>