rowKey mandatory on OTable since version 0.9.0

[pflirae]

Overview of the problem

Oruga version: 0.9.0 Vuejs version: 3.5.12 OS/Browser: not related

Description

Whe an OTable dos not have a rowKey defined the following error is reported by the browser: TypeError: crypto.randomUUID is not a function

Steps to reproduce

Create an OTable component without rowKey defined and try to load data, then on the browser console the error will be displayed.

Expected behavior

Expected that this error dos not showed up as in previous versions of oruga.

Actual behavior

The table does not load data until a rowKey is defined

[mlmoravek]

Hey, I cannot reproduce this with my stack. crypto.randomUUID should be widely available in many browsers (https://developer.mozilla.org/de/docs/Web/API/Crypto/randomUUID).

The docs work fine too. Can you make a reproducible example?

[pflirae]

Will work in a minimal case and get back, will take some time.

[pflirae]

The smallet possible case for testing an OTable with and without row-key. The case has been tested with vite and on Chrome version 130.

the pruebas.ts file

import Oruga from '@oruga-ui/oruga-next'

import { createApp } from 'vue'
import App from '@/components/Pruebas.vue'

const pruebas = createApp(App)

pruebas.use(Oruga)
pruebas.mount('#app')

the pruebas.vue file

<script lang="ts">
    import { defineComponent } from 'vue'
    import { OTable, OTableColumn, ODatepicker } from '@oruga-ui/oruga-next'

    export default defineComponent({
        name: 'Pruebas',
        components: {
            OTable,
            OTableColumn,
            ODatepicker
        },
        data() {
            return {
                lista_datos: [
                    {rk: 1, name1: 'Name10', name2: 'Name21'},
                    {rk: 2, name1: 'Name11', name2: 'Name22'},
                    {rk: 3, name1: 'Name12', name2: 'Name23'},
                ],
                loading: false,
                isEmpty: false,
                fecha: new Date()
            }
        }
    })
</script>

<template>
    <div>
        <OTable :data="isEmpty ? [] : lista_datos"
                :loading="loading"
                row-key="rk"
        >
            <OTableColumn v-slot="props" label="Name1" field="name1">{{ props.row.name1 }}</OTableColumn>
            <OTableColumn v-slot="props" label="Name2" field="name2">{{ props.row.name2 }}</OTableColumn>
        </OTable>
    </div>
</template>

<style scoped>
</style>

runing with vite dev mode, this example works fine, the table is displayed without problems, but if the row-key prop is removed from the oruga table component, this message appears on the Chrome console:

the vite.config.js file is

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
    server: {
        host: '0.0.0.0',
        hmr: {
            clientPort: 5176,
            host: 'localhost',
            protocol: 'ws'
        },
        port: 5176,
        watch: {
            // usePolling: true,
            interval: 500,
            ignored: ['**/resources/views/**', '**/storage/framework/cache/**']
        }
    },
    plugins: [
        laravel({
            input: ['resources/sass/prueba.scss', 'resources/ts/prueba.ts'],
            refresh: true,
        }),
        vue(),
    ],
    resolve: {
        alias: {
            '@': '/resources/vue/'
        }
    }
});

the package.json is this:

{
    "private": true,
    "type": "module",
    "scripts": {
        "dev": "vite",
        "build": "vite build"
    },
    "devDependencies": {
        "@oruga-ui/oruga-next": "^0.9.1",
        "@vitejs/plugin-vue": "^5.2.0",
        "@vue/compiler-sfc": "^3.5.13",
        "@vue/tsconfig": "^0.6.0",
        "axios": "^1.7.7",
        "laravel-vite-plugin": "^1.0",
        "sass": "^1.81.0",
        "typescript": "^5.6.3",
        "vite": "^5.4.11",
        "vue": "^3.5.13"
    }
}

If any other information is need, just let me know to post it.