Orders List Card - Soft UI

See below our example that you can use for your Vue.js project.

Demo

Top Selling Products

Product	Value	Ads Spent	Refunds
Nike v22 Running 12.821 orders	$130.992	$9.500	13
Black Chair 2.421 orders	$40.600	$9.430	54

<template>
 <orders-list-card
  title="Top Selling Products"
  :headers="['Product', 'Value', 'Ads Spent', 'Refunds']"
  :lists="[
    {
      title: 'Nike v22 Running',
      order: '12.821',
      values: ['$130.992', '$9.500', '13'],
      info: 'Refund rate is lower with 97% than other products',
      img:
        'https://raw.githubusercontent.com/creativetimofficial/public-assets/master/soft-ui-design-system/assets/img/ecommerce/blue-shoe.jpg',
      icon: 'bold-down text-success',
    },
    {
      title: 'Black Chair',
      order: '2.421',
      values: ['$40.600', '$9.430', '54'],
      img:
        'https://raw.githubusercontent.com/creativetimofficial/public-assets/master/soft-ui-design-system/assets/img/ecommerce/black-chair.jpg',
      icon: 'bold-up text-danger',
    },
  ]"
/>
</template>

<script>
import OrdersListCard from '@/examples/Cards/OrdersListCard.vue";
export default { components: { OrdersListCard, }, };
</script>

1<template>
2 <orders-list-card
3  title="Top Selling Products"
4  :headers="['Product', 'Value', 'Ads Spent', 'Refunds']"
5  :lists="[
6    {
7      title: 'Nike v22 Running',
8      order: '12.821',
9      values: ['$130.992', '$9.500', '13'],
10      info: 'Refund rate is lower with 97% than other products',
11      img:
12        'https://raw.githubusercontent.com/creativetimofficial/public-assets/master/soft-ui-design-system/assets/img/ecommerce/blue-shoe.jpg',
13      icon: 'bold-down text-success',
14    },
15    {
16      title: 'Black Chair',
17      order: '2.421',
18      values: ['$40.600', '$9.430', '54'],
19      img:
20        'https://raw.githubusercontent.com/creativetimofficial/public-assets/master/soft-ui-design-system/assets/img/ecommerce/black-chair.jpg',
21      icon: 'bold-up text-danger',
22    },
23  ]"
24/>
25</template>
26
27<script>
28import OrdersListCard from '@/examples/Cards/OrdersListCard.vue";
29export default { components: { OrdersListCard, }, };
30</script>

Props Information

Name	Type	Description
title	String	`title` is used to add the title of the `OrdersListCard` component.
headers	Array	`headers` is is used to add headers to the `OrdersListCard`.
lists	['values ' 'title' 'order' 'info' 'img' 'icon']	`lists` is is used to add a list of items to the `OrdersListCard` component.