mirror of
https://github.com/creativetimofficial/muse-vue-ant-design-dashboard.git
synced 2025-08-16 03:20:17 +08:00
676 lines
15 KiB
Vue
676 lines
15 KiB
Vue
<template>
|
|
<div>
|
|
<div class="page-row">
|
|
<div class="page-content">
|
|
<section class="mb-24">
|
|
<h1>Table</h1>
|
|
<p class="text-dark">
|
|
A table displays rows of data.
|
|
</p>
|
|
</section>
|
|
<a-divider />
|
|
<section class="mb-24" id="When-To-Use">
|
|
<h2>When To Use</h2>
|
|
<ul>
|
|
<li>To display a collection of structured data.</li>
|
|
<li>To sort, search, paginate, filter data.</li>
|
|
</ul>
|
|
</section>
|
|
<h2>Examples</h2>
|
|
<section class="mb-24" id="Authors-Table">
|
|
<a-divider orientation="left">Authors Table</a-divider>
|
|
<p>
|
|
Simple table with actions.
|
|
</p>
|
|
<div class="showcase p-0">
|
|
<a-table :columns="columns" :data-source="data" :pagination="false">
|
|
|
|
<template slot="author" slot-scope="author">
|
|
<div class="table-avatar-info">
|
|
<a-avatar shape="square" :src="author.avatar" />
|
|
<div class="avatar-info">
|
|
<h6>{{ author.name }}</h6>
|
|
<p>{{ author.email }}</p>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<template slot="func" slot-scope="func">
|
|
<div class="author-info">
|
|
<h6 class="m-0">{{ func.job }}</h6>
|
|
<p class="m-0 font-regular text-muted">{{ func.department }}</p>
|
|
</div>
|
|
</template>
|
|
|
|
<template slot="status" slot-scope="status">
|
|
<a-tag class="tag-status" :class="status ? 'ant-tag-primary' : 'ant-tag-muted'">
|
|
{{ status ? "ONLINE" : "OFFLINE" }}
|
|
</a-tag>
|
|
</template>
|
|
|
|
<template slot="editBtn" slot-scope="row">
|
|
<a-button type="link" :data-id="row.key" class="btn-edit">
|
|
Edit
|
|
</a-button>
|
|
</template>
|
|
|
|
</a-table>
|
|
</div>
|
|
<muse-snippet :code="authorsTableCode"></muse-snippet>
|
|
</section>
|
|
<section class="mb-24" id="Projects-Table">
|
|
<a-divider orientation="left">Projects Table</a-divider>
|
|
<div class="showcase p-0">
|
|
<a-table :columns="table2Columns" :data-source="table2Data" :pagination="false">
|
|
|
|
<template slot="name" slot-scope="text">
|
|
<a>{{ text }}</a>
|
|
</template>
|
|
|
|
<a-space slot="members" slot-scope="members" :size="-12" class="avatar-chips">
|
|
<template v-for="member in members">
|
|
<a-avatar :key="member" size="small" :src="member" />
|
|
</template>
|
|
</a-space>
|
|
|
|
<template slot="company" slot-scope="company">
|
|
<h6 class="m-0">
|
|
<img :src="company.logo" width="25" style="margin-right: 10px;">
|
|
{{ company.name }}
|
|
</h6>
|
|
</template>
|
|
|
|
<template slot="completion" slot-scope="completion">
|
|
<div class="progress-right">
|
|
<div class="text-right text-sm font-semibold text-muted pr-15">{{ completion.value || completion.value == 0 ? completion.value : completion }}%</div>
|
|
<a-progress class="m-0" :percent="completion.value || completion.value == 0 ? completion.value : completion" :show-info="false" size="small" :status="completion.status ? completion.status : 'normal'" />
|
|
</div>
|
|
</template>
|
|
|
|
<template slot="editBtn" slot-scope="row">
|
|
<a-button type="link" :data-id="row.key">
|
|
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path class="fill-gray-7" d="M13.5858 3.58579C14.3668 2.80474 15.6332 2.80474 16.4142 3.58579C17.1953 4.36683 17.1953 5.63316 16.4142 6.41421L15.6213 7.20711L12.7929 4.37868L13.5858 3.58579Z"/>
|
|
<path class="fill-gray-7" d="M11.3787 5.79289L3 14.1716V17H5.82842L14.2071 8.62132L11.3787 5.79289Z"/>
|
|
</svg>
|
|
</a-button>
|
|
</template>
|
|
|
|
</a-table>
|
|
</div>
|
|
<muse-snippet :code="projectsTableCode"></muse-snippet>
|
|
</section>
|
|
|
|
<p class="text-right font-semibold mb-24">
|
|
Looking for more Ant Design Vue Table? Please check the
|
|
<a target="_blank" href="https://antdv.com/components/table/">official docs</a>.
|
|
</p>
|
|
</div>
|
|
<muse-anchor :anchors="anchors"></muse-anchor>
|
|
</div>
|
|
</div>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
|
|
// "Authors" table list of columns and their properties.
|
|
const columns = [
|
|
{
|
|
title: 'AUTHOR',
|
|
dataIndex: 'author',
|
|
scopedSlots: { customRender: 'author' },
|
|
},
|
|
{
|
|
title: 'FUNCTION',
|
|
dataIndex: 'func',
|
|
scopedSlots: { customRender: 'func' },
|
|
},
|
|
{
|
|
title: 'STATUS',
|
|
dataIndex: 'status',
|
|
scopedSlots: { customRender: 'status' },
|
|
},
|
|
{
|
|
title: 'EMPLOYED',
|
|
dataIndex: 'employed',
|
|
class: 'text-muted',
|
|
},
|
|
{
|
|
title: '',
|
|
scopedSlots: { customRender: 'editBtn' },
|
|
width: 50,
|
|
},
|
|
];
|
|
|
|
// "Authors" table list of rows and their properties.
|
|
const data = [
|
|
{
|
|
key: '1',
|
|
author: {
|
|
avatar: '/images/face-2.jpg',
|
|
name: 'Michael John',
|
|
email: 'michael@mail.com',
|
|
},
|
|
func: {
|
|
job: 'Manager',
|
|
department: 'Organization',
|
|
},
|
|
status: 1,
|
|
employed: '23/04/18',
|
|
},
|
|
{
|
|
key: '2',
|
|
author: {
|
|
avatar: '/images/face-3.jpg',
|
|
name: 'Alexa Liras',
|
|
email: 'alexa@mail.com',
|
|
},
|
|
func: {
|
|
job: 'Programator',
|
|
department: 'Developer',
|
|
},
|
|
status: 0,
|
|
employed: '23/12/20',
|
|
},
|
|
{
|
|
key: '3',
|
|
author: {
|
|
avatar: '/images/face-1.jpg',
|
|
name: 'Laure Perrier',
|
|
email: 'laure@mail.com',
|
|
},
|
|
func: {
|
|
job: 'Executive',
|
|
department: 'Projects',
|
|
},
|
|
status: 1,
|
|
employed: '13/04/19',
|
|
},
|
|
{
|
|
key: '4',
|
|
author: {
|
|
avatar: '/images/face-4.jpg',
|
|
name: 'Miriam Eric',
|
|
email: 'miriam@mail.com',
|
|
},
|
|
func: {
|
|
job: 'Marketing',
|
|
department: 'Organization',
|
|
},
|
|
status: 1,
|
|
employed: '03/04/21',
|
|
},
|
|
{
|
|
key: '5',
|
|
author: {
|
|
avatar: '/images/face-5.jpeg',
|
|
name: 'Richard Gran',
|
|
email: 'richard@mail.com',
|
|
},
|
|
func: {
|
|
job: 'Manager',
|
|
department: 'Organization',
|
|
},
|
|
status: 0,
|
|
employed: '23/03/20',
|
|
},
|
|
{
|
|
key: '6',
|
|
author: {
|
|
avatar: '/images/face-6.jpeg',
|
|
name: 'John Levi',
|
|
email: 'john@mail.com',
|
|
},
|
|
func: {
|
|
job: 'Tester',
|
|
department: 'Developer',
|
|
},
|
|
status: 0,
|
|
employed: '14/04/17',
|
|
},
|
|
];
|
|
|
|
// "Projects" table list of columns and their properties.
|
|
const table2Columns = [
|
|
{
|
|
title: 'COMPANIES',
|
|
dataIndex: 'company',
|
|
scopedSlots: { customRender: 'company' },
|
|
width: 300,
|
|
},
|
|
{
|
|
title: 'BUDGET',
|
|
dataIndex: 'budget',
|
|
class: 'font-semibold text-muted',
|
|
},
|
|
{
|
|
title: 'STATUS',
|
|
dataIndex: 'status',
|
|
class: 'font-semibold text-muted text-sm',
|
|
},
|
|
{
|
|
title: 'COMPLETION',
|
|
scopedSlots: { customRender: 'completion' },
|
|
dataIndex: 'completion',
|
|
},
|
|
{
|
|
title: '',
|
|
scopedSlots: { customRender: 'editBtn' },
|
|
width: 50,
|
|
},
|
|
];
|
|
|
|
// "Projects" table list of rows and their properties.
|
|
const table2Data = [
|
|
{
|
|
key: '1',
|
|
company: {
|
|
name: 'Spotify Version',
|
|
logo: '/images/logos/logo-spotify.svg',
|
|
},
|
|
status: "working",
|
|
budget: '$14,000',
|
|
completion: 60,
|
|
},
|
|
{
|
|
key: '2',
|
|
company: {
|
|
name: 'Progress Track',
|
|
logo: '/images/logos/logo-atlassian.svg',
|
|
},
|
|
status: "working",
|
|
budget: '$3,000',
|
|
completion: 10,
|
|
},
|
|
{
|
|
key: '3',
|
|
company: {
|
|
name: 'Jira Platform Errors',
|
|
logo: '/images/logos/logo-slack.svg',
|
|
},
|
|
status: "done",
|
|
budget: 'Not Set',
|
|
completion: {
|
|
status: 'success',
|
|
value: 100,
|
|
},
|
|
},
|
|
{
|
|
key: '4',
|
|
company: {
|
|
name: 'Launch new Mobile App',
|
|
logo: '/images/logos/logo-spotify.svg',
|
|
},
|
|
status: "canceled",
|
|
budget: '$20,600',
|
|
completion: {
|
|
status: 'exception',
|
|
value: 50,
|
|
},
|
|
},
|
|
{
|
|
key: '5',
|
|
company: {
|
|
name: 'Web Dev',
|
|
logo: '/images/logos/logo-webdev.svg',
|
|
},
|
|
status: "working",
|
|
budget: '$4,000',
|
|
completion: 80,
|
|
},
|
|
{
|
|
key: '6',
|
|
company: {
|
|
name: 'Redesign Online Store',
|
|
logo: '/images/logos/logo-invision.svg',
|
|
},
|
|
status: "canceled",
|
|
budget: '$2,000',
|
|
completion: {
|
|
status: 'exception',
|
|
value: 0,
|
|
},
|
|
},
|
|
];
|
|
|
|
export default {
|
|
head () {
|
|
return {
|
|
title: 'Table | Muse Vue Ant Design Dashboard @ Creative Tim',
|
|
meta: [
|
|
{ hid: 'description', name: 'description', content: 'A table displays rows of data.' }
|
|
]
|
|
}
|
|
},
|
|
data(){
|
|
return {
|
|
anchors: {
|
|
"When-To-Use": "When To Use",
|
|
"Authors-Table": "Authors Table",
|
|
"Projects-Table": "Projects Table",
|
|
},
|
|
data,
|
|
columns,
|
|
table2Data,
|
|
table2Columns,
|
|
authorsTableCode: `
|
|
<template>
|
|
<a-table :columns="columns" :data-source="data" :pagination="false">
|
|
|
|
<template slot="author" slot-scope="author">
|
|
<div class="table-avatar-info">
|
|
<a-avatar shape="square" :src="author.avatar" />
|
|
<div class="avatar-info">
|
|
<h6>{{ author.name }}</h6>
|
|
<p>{{ author.email }}</p>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<template slot="func" slot-scope="func">
|
|
<div class="author-info">
|
|
<h6 class="m-0">{{ func.job }}</h6>
|
|
<p class="m-0 font-regular text-muted">{{ func.department }}</p>
|
|
</div>
|
|
</template>
|
|
|
|
<template slot="status" slot-scope="status">
|
|
<a-tag class="tag-status" :class="status ? 'ant-tag-primary' : 'ant-tag-muted'">
|
|
{{ status ? "ONLINE" : "OFFLINE" }}
|
|
</a-tag>
|
|
</template>
|
|
|
|
<template slot="editBtn" slot-scope="row">
|
|
<a-button type="link" :data-id="row.key" class="btn-edit">
|
|
Edit
|
|
</a-button>
|
|
</template>
|
|
|
|
</a-table>
|
|
</template>
|
|
<script>
|
|
const columns = [
|
|
{
|
|
title: 'AUTHOR',
|
|
dataIndex: 'author',
|
|
scopedSlots: { customRender: 'author' },
|
|
},
|
|
{
|
|
title: 'FUNCTION',
|
|
dataIndex: 'func',
|
|
scopedSlots: { customRender: 'func' },
|
|
},
|
|
{
|
|
title: 'STATUS',
|
|
dataIndex: 'status',
|
|
scopedSlots: { customRender: 'status' },
|
|
},
|
|
{
|
|
title: 'EMPLOYED',
|
|
dataIndex: 'employed',
|
|
class: 'text-muted',
|
|
},
|
|
{
|
|
title: '',
|
|
scopedSlots: { customRender: 'editBtn' },
|
|
width: 50,
|
|
},
|
|
];
|
|
|
|
const data = [
|
|
{
|
|
key: '1',
|
|
author: {
|
|
avatar: '/images/face-2.jpg',
|
|
name: 'Michael John',
|
|
email: 'michael@mail.com',
|
|
},
|
|
func: {
|
|
job: 'Manager',
|
|
department: 'Organization',
|
|
},
|
|
status: 1,
|
|
employed: '23/04/18',
|
|
},
|
|
{
|
|
key: '2',
|
|
author: {
|
|
avatar: '/images/face-3.jpg',
|
|
name: 'Alexa Liras',
|
|
email: 'alexa@mail.com',
|
|
},
|
|
func: {
|
|
job: 'Programator',
|
|
department: 'Developer',
|
|
},
|
|
status: 0,
|
|
employed: '23/12/20',
|
|
},
|
|
{
|
|
key: '3',
|
|
author: {
|
|
avatar: '/images/face-1.jpg',
|
|
name: 'Laure Perrier',
|
|
email: 'laure@mail.com',
|
|
},
|
|
func: {
|
|
job: 'Executive',
|
|
department: 'Projects',
|
|
},
|
|
status: 1,
|
|
employed: '13/04/19',
|
|
},
|
|
{
|
|
key: '4',
|
|
author: {
|
|
avatar: '/images/face-4.jpg',
|
|
name: 'Miriam Eric',
|
|
email: 'miriam@mail.com',
|
|
},
|
|
func: {
|
|
job: 'Marketing',
|
|
department: 'Organization',
|
|
},
|
|
status: 1,
|
|
employed: '03/04/21',
|
|
},
|
|
{
|
|
key: '5',
|
|
author: {
|
|
avatar: '/images/face-5.jpeg',
|
|
name: 'Richard Gran',
|
|
email: 'richard@mail.com',
|
|
},
|
|
func: {
|
|
job: 'Manager',
|
|
department: 'Organization',
|
|
},
|
|
status: 0,
|
|
employed: '23/03/20',
|
|
},
|
|
{
|
|
key: '6',
|
|
author: {
|
|
avatar: '/images/face-6.jpeg',
|
|
name: 'John Levi',
|
|
email: 'john@mail.com',
|
|
},
|
|
func: {
|
|
job: 'Tester',
|
|
department: 'Developer',
|
|
},
|
|
status: 0,
|
|
employed: '14/04/17',
|
|
},
|
|
];
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
data,
|
|
columns,
|
|
};
|
|
},
|
|
};
|
|
<\/script>`,
|
|
projectsTableCode: `
|
|
<template>
|
|
<a-table :columns="columns" :data-source="data" :pagination="false">
|
|
|
|
<template slot="name" slot-scope="text">
|
|
<a>{{ text }}</a>
|
|
</template>
|
|
|
|
<a-space slot="members" slot-scope="members" :size="-12" class="avatar-chips">
|
|
<template v-for="member in members">
|
|
<a-avatar :key="member" size="small" :src="member" />
|
|
</template>
|
|
</a-space>
|
|
|
|
<template slot="company" slot-scope="company">
|
|
<h6 class="m-0">
|
|
<img :src="company.logo" width="25" style="margin-right: 10px;">
|
|
{{ company.name }}
|
|
</h6>
|
|
</template>
|
|
|
|
<template slot="completion" slot-scope="completion">
|
|
<div class="progress-right">
|
|
<div class="text-right text-sm font-semibold text-muted pr-15">{{ completion.value || completion.value == 0 ? completion.value : completion }}%</div>
|
|
<a-progress class="m-0" :percent="completion.value || completion.value == 0 ? completion.value : completion" :show-info="false" size="small" :status="completion.status ? completion.status : 'normal'" />
|
|
</div>
|
|
</template>
|
|
|
|
<template slot="editBtn" slot-scope="row">
|
|
<a-button type="link" :data-id="row.key">
|
|
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path class="fill-gray-7" d="M13.5858 3.58579C14.3668 2.80474 15.6332 2.80474 16.4142 3.58579C17.1953 4.36683 17.1953 5.63316 16.4142 6.41421L15.6213 7.20711L12.7929 4.37868L13.5858 3.58579Z"/>
|
|
<path class="fill-gray-7" d="M11.3787 5.79289L3 14.1716V17H5.82842L14.2071 8.62132L11.3787 5.79289Z"/>
|
|
</svg>
|
|
</a-button>
|
|
</template>
|
|
|
|
</a-table>
|
|
</template>
|
|
<script>
|
|
const columns = [
|
|
{
|
|
title: 'COMPANIES',
|
|
dataIndex: 'company',
|
|
scopedSlots: { customRender: 'company' },
|
|
width: 300,
|
|
},
|
|
{
|
|
title: 'BUDGET',
|
|
dataIndex: 'budget',
|
|
class: 'font-semibold text-muted',
|
|
},
|
|
{
|
|
title: 'STATUS',
|
|
dataIndex: 'status',
|
|
class: 'font-semibold text-muted text-sm',
|
|
},
|
|
{
|
|
title: 'COMPLETION',
|
|
scopedSlots: { customRender: 'completion' },
|
|
dataIndex: 'completion',
|
|
},
|
|
{
|
|
title: '',
|
|
scopedSlots: { customRender: 'editBtn' },
|
|
width: 50,
|
|
},
|
|
];
|
|
|
|
const data = [
|
|
{
|
|
key: '1',
|
|
company: {
|
|
name: 'Spotify Version',
|
|
logo: '/images/logos/logo-spotify.svg',
|
|
},
|
|
status: "working",
|
|
budget: '$14,000',
|
|
completion: 60,
|
|
},
|
|
{
|
|
key: '2',
|
|
company: {
|
|
name: 'Progress Track',
|
|
logo: '/images/logos/logo-atlassian.svg',
|
|
},
|
|
status: "working",
|
|
budget: '$3,000',
|
|
completion: 10,
|
|
},
|
|
{
|
|
key: '3',
|
|
company: {
|
|
name: 'Jira Platform Errors',
|
|
logo: '/images/logos/logo-slack.svg',
|
|
},
|
|
status: "done",
|
|
budget: 'Not Set',
|
|
completion: {
|
|
status: 'success',
|
|
value: 100,
|
|
},
|
|
},
|
|
{
|
|
key: '4',
|
|
company: {
|
|
name: 'Launch new Mobile App',
|
|
logo: '/images/logos/logo-spotify.svg',
|
|
},
|
|
status: "canceled",
|
|
budget: '$20,600',
|
|
completion: {
|
|
status: 'exception',
|
|
value: 50,
|
|
},
|
|
},
|
|
{
|
|
key: '5',
|
|
company: {
|
|
name: 'Web Dev',
|
|
logo: '/images/logos/logo-webdev.svg',
|
|
},
|
|
status: "working",
|
|
budget: '$4,000',
|
|
completion: 80,
|
|
},
|
|
{
|
|
key: '6',
|
|
company: {
|
|
name: 'Redesign Online Store',
|
|
logo: '/images/logos/logo-invision.svg',
|
|
},
|
|
status: "canceled",
|
|
budget: '$2,000',
|
|
completion: {
|
|
status: 'exception',
|
|
value: 0,
|
|
},
|
|
},
|
|
];
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
data,
|
|
columns,
|
|
};
|
|
},
|
|
};
|
|
<\/script>`,
|
|
}
|
|
},
|
|
methods: {
|
|
}
|
|
}
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
</style> |