<markdown>
  # Debug
</markdown>

<script lang="ts" setup>
import { ref } from 'vue'

function createCols(): any {
  return [
    {
      title: 'Name',
      key: 'name',
      fixed: 'left',
      children: [
        {
          title: '1',
          key: '1',
          fixed: 'left',
          width: 100
        },
        {
          title: '2',
          key: '2',
          fixed: 'left',
          width: 100
        },
        {
          title: '3',
          key: '3',
          fixed: 'left',
          width: 100
        },
        {
          title: '4',
          key: '4',
          fixed: 'left',
          width: 100
        },
        {
          title: '5',
          key: '5',
          fixed: 'left',
          width: 100
        },
        {
          title: '6',
          key: '6',
          fixed: 'left',
          width: 100
        }
      ]
    },
    { title: 'Name2', key: 'name1', fixed: 'left', width: 100 },
    { title: 'Name3', key: 'name2', fixed: 'left', width: 100 },
    {
      title: 'Attrs',
      key: 'attrs',
      children: [
        {
          title: 'Attack',
          key: 'attack',
          children: [
            {
              title: 'Physics Attack',
              key: 'physicsAttack'
            },
            {
              title: 'Magic Attack',
              key: 'magicAttack'
            }
          ]
        },
        {
          title: 'Defend',
          key: 'defend'
        },
        {
          title: 'Speed',
          key: 'speed'
        },
        {
          title: 'Defend1',
          key: 'defend1'
        },
        {
          title: 'Speed2',
          key: 'speed2'
        }
      ]
    }
  ]
}

function createData() {
  return Array.from({ length: 50 })
    .fill(null)
    .map((_, i) => {
      return {
        key: i,
        name: `name_${i}`,
        physicsAttack: `physicsAttack_${i}`,
        magicAttack: `magicAttack_${i}`,
        defend: `defend_${i}`,
        speed: `speed_${i}`
      }
    })
}

const data = ref(createData())
const columns = ref(createCols())
const pagination = ref({
  pageSize: 10
})
</script>

<template>
  <n-data-table
    bordered
    :scroll-x="2000"
    :max-height="200"
    :data="data"
    :columns="columns"
    :single-line="false"
    :pagination="pagination"
  />
</template>
