loducode-custom-table v0.0.29

loducode-custom-table

Package for custom table component in Vue 3

Type Support For .vue Imports in TS

example:

<script setup lang="ts">
    import {CustomTable, TableSearching, useCustomTableStore, IItemHeader, IItemHeader} from 'loducode-custom-table'

    var storeCustomTable = null
    onMounted(() => {
                storeCustomTable = useCustomTableStore()
                watch(() => storeCustomTable.get_search, (value) => {
                    console.log(value, 'search')
                })
                watch(() => storeCustomTable.get_action, (value) => {
                    console.log(value, 'action')
                })
                watch(() => storeCustomTable.get_id_object, async (value) => {
                    console.log(value, 'id')
                })
                watch(() => storeCustomTable.get_redirectUrl, async (value) => {
                    console.log(value, 'redirectUrl')
                })
            }
    )
    const headers: IItemHeader[] = [
        {
            name: 'username',
            title: 'Correo',
            customClass: '',
        },
        {
            name: 'name',
            title: 'Nombre',
            customClass: ''
        },
        {
            name: 'image',
            title: 'Image',
            customClass: ''
        },
        {
            name: 'actions',
            title: 'Acciones',
            customClass: 'w-4'
        },
    ]
    const table_data = ref < IItemTable[][] > ([])
    const register: IItemTable[] = []
    register.push({
        value: 'item1',
        value2: 'uuid',
        redirectUrl: '/login',
        external:true,
        customClass: 'px-6, cursor-pointer',
        type: 'doble'
    })
    register.push({
        value: 'item2',
        value2: '',
        customClass: 'px-12',
        type: 'simple',
    })
    register.push({
        value: 'https://fakeimg.pl/350x200/?text=Hello',
        value2: '',
        customClass: 'px-12',
        type: 'image',
    })
    register.push({
        value: 'editStudentModal',
        value2: 'popup-modal-student',
        id: '11212',
        customClass: '',
        type: 'actions',
    })
    table_data.value.push(register)
</script>

<div class="inline-flex" style="flex-wrap: wrap">
    <table-searching title-button-create="Crear Estudiante"
                     placeholder="Buscar Estudiante" id_search="search_student" name_search="search_student"
                     is_hiden=0 title="Estudiantes" :store_table="storeCustomTable"/>
    <custom-table :name_headers="headers" :list_data="table_data" name="Estudiantes" :store_table="storeCustomTable"></custom-table>
</div>