Theme color

Use theme-color prop to customize color of active checkbox, active option of rows selector, loading animation and active pagination button.

Example

<EasyDataTable
  :headers="headers"
  :items="items"
  :theme-color="#f48225"
  :items-selected="itemsSelected"
  buttons-pagination
  loading
/>

<script lang="ts" setup>
import type { Header, Item } from "vue3-easy-data-table";
import { ref } from "vue";

const headers: Header[] = [
  { text: "PLAYER", value: "player" },
  { text: "TEAM", value: "team"},
  { text: "NUMBER", value: "number"},
  { text: "POSITION", value: "position"},
  { text: "HEIGHT", value: "height"},
  { text: "WEIGHT (lbs)", value: "weight", sortable: true},
  { text: "LAST ATTENDED", value: "lastAttended"},
  { text: "COUNTRY", value: "country"},
];

const items: Item[] = [
  { "player": "Stephen Curry", "team": "GSW", "number": 30, "position": 'G', "height": '6-2', "weight": 185, "lastAttended": "Davidson", "country": "USA"},
  { "player": "Lebron James", "team": "LAL", "number": 6, "position": 'F', "height": '6-9', "weight": 250, "lastAttended": "St. Vincent-St. Mary HS (OH)", "country": "USA"},
  { "player": "Kevin Durant", "team": "BKN", "number": 7, "position": 'F', "height": '6-10', "weight": 240, "lastAttended": "Texas-Austin", "country": "USA"},
  { "player": "Giannis Antetokounmpo", "team": "MIL", "number": 34, "position": 'F', "height": '6-11', "weight": 242, "lastAttended": "Filathlitikos", "country": "Greece"},
];

const itemsSelected = ref([items[0]]);
</script>

	PLAYER	TEAM	NUMBER	POSITION	HEIGHT	WEIGHT (lbs)	LAST ATTENDED	COUNTRY
	Stephen Curry	GSW	30	G	6-2	185	Davidson	USA
	Lebron James	LAL	6	F	6-9	250	St. Vincent-St. Mary HS (OH)	USA
	Kevin Durant	BKN	7	F	6-10	240	Texas-Austin	USA
	Giannis Antetokounmpo	MIL	34	F	6-11	242	Filathlitikos	Greece

rows per page:

25

• 25
• 50
• 100

1–4 of 4

1