Antdv Next

## Ant Design Vue (Antdv) Next: Component Implementation Guide

Here’s how to implement a responsive data table with pagination in your [PROJECT_NAME] using Antdv Next:

### 1. Install Ant Design Vue
```bash
npm install ant-design-vue@next
```

### 2. Import Components in `main.js`
```javascript
import { createApp } from 'vue';
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/reset.css';
import App from './App.vue';

const app = createApp(App);
app.use(Antd);
app.mount('#app');
```

### 3. Create a Responsive Table
```vue
<template>
  <a-table 
    :dataSource="dataSource" 
    :columns="columns" 
    :pagination="pagination" 
    bordered 
    size="middle"
  />
</template>

<script setup>
import { ref } from 'vue';

const dataSource = ref([
  { id: 1, name: 'John Doe', email: '[email protected]', status: 'Active' },
  { id: 2, name: 'Jane Smith', email: '[email protected]', status: 'Inactive' },
  { id: 3, name: 'Bob Johnson', email: '[email protected]', status: 'Active' },
]);

const columns = [
  { title: 'ID', dataIndex: 'id', key: 'id' },
  { title: 'Name', dataIndex: 'name', key: 'name' },
  { title: 'Email', dataIndex: 'email', key: 'email' },
  { title: 'Status', dataIndex: 'status', key: 'status' },
];

const pagination = ref({
  pageSize: 10,
  total: dataSource.value.length,
  showSizeChanger: true,
});
</script>
```

### 4. Key Features Used
- **Responsive Design**: Table adapts to screen size.
- **Pagination**: Built-in pagination with dynamic page size.
- **Custom Styling**: Use `size` and `bordered` props for visual customization.

For more details, refer to the [Ant Design Vue Next Documentation](https://antdv.com/docs/vue/introduce).