Table


This is one of the interesting components in this package. You can create a responsive table without having to worry about the padding and spacing between the cells. It is inspired from the Tailwind UI. There are two options available for the table theme, dark and light.


A basic example of light table is as below



<template>
  <Table>
<template #header>
<TR>
    <TH> Name <TH>
    <TH> Email <TH>
    <TH> Contact <TH>
</TR>
</template>
<template #body>
<TR>
    <TH> Aditya <TH>
    <TH> aditya@adiranids.com <TH>
    <TH> CoFounder, Developer, MD <TH>
</TR>
<TR>
    <TH> John Doe <TH>
    <TH> john@doe.com <TH>
    <TH> Virtual Assistant <TH>
</TR>
</template>
<template #footer>
<TR>
    <TH> 2 <TH>
    <TH> 2 <TH>
    <TH> 2 <TH>
</TR>
</template>
</Table>
</template>

<script>
  import {Table, TH, TR, TD} from '@adiranids/vue3-tailwind'
  export default {
    components: {Table, TH, TR, TD}
  }
</script>


Light Table Example


Notice the TH, TD and TR components in the above code, if they are used in lowercase then they will be treated as html tags and not as Vue components.


If you do not need the footer then just omit the #footer template slot.


You can also change the theme of the table to dark theme by setting the darkMode prop to true.



Dark Table Example


Here is the complete list of available props and their default values


Prop Default Value Description
darkMode (type = bollean) false

Changes the theme of the table to dark theme if set as true.


<Table :darkMode='true'>...</Table>

bordered (type = boolean) true If set to true, draws the outer border to the table. color.


Copyright © 2021 Adirani Digital Solutions Ltd