click event and handler not functioning

[impactcolor]

I'm sure I"m doing something wrong here but the event: 'click' and handler isn't working for me. My code using some boiler plate from the example is:

//partial template

            <data-table
                ref="orders-data"
                url="/api/orders"
                :columns="dataColumns">
            </data-table>

<script>
 export default {
        name: 'app',
        methods: {
            clickRow() {
              console.log('this is a test');
            },
            reloadTableEloquent() {
              console.log('clicked element')
                this.$refs.eloquent.getData()
            },
            reloadQueryTable(options) {
                this.getData(this.url, options);
            },
            reloadLocalTable(options) {
                this.getData(this.url, options);
            },
            getData(url = this.url, options = this.tableProps) {
                axios.get(url, {
                    params: options
                })
                .then(response => {
                   this.data = response.data;
                })
                .catch(error => {

                });
            }
        },
        created() {
            this.getData();
        },
        data() {
            return {
                dataColumns: [
                    {
                        label: 'Scheduled',
                        name: 'inspection_date',
                        width: 20,
                        columnName: 'inspection_date',
                        orderable: true,
                        event: 'click',
                        handler: () => console.log('test'),
                    },
                    {
                        label: 'Ordered',
                        name: 'order_date',
                        width: 20,
                        orderable: true,
                    },
                    {
                        label: 'Time',
                        name: 'inspection_time',
                        width: 20,
                        orderable: true,
                    },
                    {
                        label: 'Address',
                        name: 'address',
                        width: 30,
                        orderable: true,
                    },
                    {
                        label: 'Total',
                        name: 'total',
                        columnName: 'total',
                        width: 20,
                        orderable: true,
                    },
                ],
            }
        },
    }
</script>

Any idea what I'm doing wrong?

[impactcolor]

Ok I figured out I need to use a component for event click to work. Got it