Table

Default

Create a table simply with the s-table component and itss-tr, s-td,s-th components.

This component has a different logic for better data management and freer customization according to needs.

Code copied

<template>
  <div class="center examplex">
    <s-table>
      <template #thead>
        <s-tr>
          <s-th> Name </s-th>
          <s-th> Email </s-th>
          <s-th> Id </s-th>
        </s-tr>
      </template>
      <template #tbody>
        <s-tr v-for="(tr, i) in users" :key="i" :data="tr">
          <s-td>
            {{ tr.name }}
          </s-td>
          <s-td>
            {{ tr.email }}
          </s-td>
          <s-td>
            {{ tr.id }}
          </s-td>
        </s-tr>
      </template>
    </s-table>
  </div>
</template>

<script lang="ts" setup>
type User = {
  id: number | string
  name: string
  username: string
  email: string
  website: string
}

const users: User[] = [
  {
    id: 1,
    name: 'Leanne Graham',
    username: 'Bret',
    email: 'Sincere@april.biz',
    website: 'hildegard.org',
  },
  {
    id: 2,
    name: 'Ervin Howell',
    username: 'Antonette',
    email: 'Shanna@melissa.tv',
    website: 'anastasia.net',
  },
  {
    id: 3,
    name: 'Clementine Bauch',
    username: 'Samantha',
    email: 'Nathan@yesenia.net',
    website: 'ramiro.info',
  },
  {
    id: 4,
    name: 'Patricia Lebsack',
    username: 'Karianne',
    email: 'Julianne.OConner@kory.org',
    website: 'kale.biz',
  },
  {
    id: 5,
    name: 'Chelsey Dietrich',
    username: 'Kamren',
    email: 'Lucio_Hettinger@annie.ca',
    website: 'demarco.info',
  },
  {
    id: 6,
    name: 'Mrs. Dennis Schulist',
    username: 'Leopoldo_Corkery',
    email: 'Karley_Dach@jasper.info',
    website: 'ola.org',
  },
  {
    id: 7,
    name: 'Kurtis Weissnat',
    username: 'Elwyn.Skiles',
    email: 'Telly.Hoeger@billy.biz',
    website: 'elvis.io',
  },
  {
    id: 8,
    name: 'Nicholas Runolfsdottir V',
    username: 'Maxime_Nienow',
    email: 'Sherwood@rosamond.me',
    website: 'jacynthe.com',
  },
  {
    id: 9,
    name: 'Glenna Reichert',
    username: 'Delphine',
    email: 'Chaim_McDermott@dana.io',
    website: 'conrad.com',
  },
  {
    id: 10,
    name: 'Clementina DuBuque',
    username: 'Moriah.Stanton',
    email: 'Rey.Padberg@karina.biz',
    website: 'ambrose.net',
  },
]
</script>

Striped

You can easily strip the table with the striped property

Code copied

<template>
  <div class="center examplex">
    <s-table striped>
      <template #thead>
        <s-tr>
          <s-th> Name </s-th>
          <s-th> Email </s-th>
          <s-th> Id </s-th>
        </s-tr>
      </template>
      <template #tbody>
        <s-tr v-for="(tr, i) in users" :key="i" :data="tr">
          <s-td>
            {{ tr.name }}
          </s-td>
          <s-td>
            {{ tr.email }}
          </s-td>
          <s-td>
            {{ tr.id }}
          </s-td>
        </s-tr>
      </template>
    </s-table>
  </div>
</template>

<script lang="ts" setup>
type User = {
  id: number | string
  name: string
  username: string
  email: string
  website: string
}

const users: User[] = [
  {
    id: 1,
    name: 'Leanne Graham',
    username: 'Bret',
    email: 'Sincere@april.biz',
    website: 'hildegard.org',
  },
  {
    id: 2,
    name: 'Ervin Howell',
    username: 'Antonette',
    email: 'Shanna@melissa.tv',
    website: 'anastasia.net',
  },
  {
    id: 3,
    name: 'Clementine Bauch',
    username: 'Samantha',
    email: 'Nathan@yesenia.net',
    website: 'ramiro.info',
  },
  {
    id: 4,
    name: 'Patricia Lebsack',
    username: 'Karianne',
    email: 'Julianne.OConner@kory.org',
    website: 'kale.biz',
  },
  {
    id: 5,
    name: 'Chelsey Dietrich',
    username: 'Kamren',
    email: 'Lucio_Hettinger@annie.ca',
    website: 'demarco.info',
  },
  {
    id: 6,
    name: 'Mrs. Dennis Schulist',
    username: 'Leopoldo_Corkery',
    email: 'Karley_Dach@jasper.info',
    website: 'ola.org',
  },
  {
    id: 7,
    name: 'Kurtis Weissnat',
    username: 'Elwyn.Skiles',
    email: 'Telly.Hoeger@billy.biz',
    website: 'elvis.io',
  },
  {
    id: 8,
    name: 'Nicholas Runolfsdottir V',
    username: 'Maxime_Nienow',
    email: 'Sherwood@rosamond.me',
    website: 'jacynthe.com',
  },
  {
    id: 9,
    name: 'Glenna Reichert',
    username: 'Delphine',
    email: 'Chaim_McDermott@dana.io',
    website: 'conrad.com',
  },
  {
    id: 10,
    name: 'Clementina DuBuque',
    username: 'Moriah.Stanton',
    email: 'Rey.Padberg@karina.biz',
    website: 'ambrose.net',
  },
]
</script>

Color

Change the color of a tr by adding the color property to the component s-tr

Code copied

<template>
  <div class="center">
    <s-table>
      <template #thead>
        <s-tr>
          <s-th> Name </s-th>
          <s-th> Email </s-th>
          <s-th> Id </s-th>
        </s-tr>
      </template>
      <template #tbody>
        <s-tr v-for="(tr, i) in users" :key="i" :data="tr" :color="trColor(i)">
          <s-td>
            {{ tr.name }}
          </s-td>
          <s-td>
            {{ tr.email }}
          </s-td>
          <s-td>
            {{ tr.id }}
          </s-td>
        </s-tr>
      </template>
    </s-table>
  </div>
</template>

<script lang="ts" setup>
import type { Color } from 'sax-design-vue'

type User = {
  id: number | string
  name: string
  username: string
  email: string
  website: string
}

const trColor = (i: number): Color => {
  switch (i) {
    case 3:
      return 'danger'
    case 5:
      return 'success'
    case 8:
      return 'primary'
    case 9:
      return 'warn'
  }
  return 'secondary'
}

const users: User[] = [
  {
    id: 1,
    name: 'Leanne Graham',
    username: 'Bret',
    email: 'Sincere@april.biz',
    website: 'hildegard.org',
  },
  {
    id: 2,
    name: 'Ervin Howell',
    username: 'Antonette',
    email: 'Shanna@melissa.tv',
    website: 'anastasia.net',
  },
  {
    id: 3,
    name: 'Clementine Bauch',
    username: 'Samantha',
    email: 'Nathan@yesenia.net',
    website: 'ramiro.info',
  },
  {
    id: 4,
    name: 'Patricia Lebsack',
    username: 'Karianne',
    email: 'Julianne.OConner@kory.org',
    website: 'kale.biz',
  },
  {
    id: 5,
    name: 'Chelsey Dietrich',
    username: 'Kamren',
    email: 'Lucio_Hettinger@annie.ca',
    website: 'demarco.info',
  },
  {
    id: 6,
    name: 'Mrs. Dennis Schulist',
    username: 'Leopoldo_Corkery',
    email: 'Karley_Dach@jasper.info',
    website: 'ola.org',
  },
  {
    id: 7,
    name: 'Kurtis Weissnat',
    username: 'Elwyn.Skiles',
    email: 'Telly.Hoeger@billy.biz',
    website: 'elvis.io',
  },
  {
    id: 8,
    name: 'Nicholas Runolfsdottir V',
    username: 'Maxime_Nienow',
    email: 'Sherwood@rosamond.me',
    website: 'jacynthe.com',
  },
  {
    id: 9,
    name: 'Glenna Reichert',
    username: 'Delphine',
    email: 'Chaim_McDermott@dana.io',
    website: 'conrad.com',
  },
  {
    id: 10,
    name: 'Clementina DuBuque',
    username: 'Moriah.Stanton',
    email: 'Rey.Padberg@karina.biz',
    website: 'ambrose.net',
  },
]
</script>

Pagination

You can add the pagination functionality for the table using the #footer slot and the s-pagination component

To make the development easier you can use the Sax Design function that generates the items (getPage) based on the page and also the one that generates the total number of pages in the pagination component (getLength)

This way of handling data is to improve the freedom of customization without losing the ease of implementation

See the example

Code copied

<template>
  <div class="center">
    <s-table>
      <template #thead>
        <s-tr>
          <s-th> Name </s-th>
          <s-th> Email </s-th>
          <s-th> Id </s-th>
        </s-tr>
      </template>
      <template #tbody>
        <s-tr
          v-for="(tr, i) in getPage(totalUser, page, pageSize)"
          :key="i"
          :data="tr"
        >
          <s-td>
            {{ tr.name }}
          </s-td>
          <s-td>
            {{ tr.email }}
          </s-td>
          <s-td>
            {{ tr.id }}
          </s-td>
        </s-tr>
      </template>
      <template #footer>
        <s-pagination
          v-model:current-page="page"
          v-model:page-size="pageSize"
          :page-sizes="[3, 5, 7]"
          :total="totalUser.length"
        />
      </template>
    </s-table>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { getPage } from 'sax-design-vue'

type User = {
  id: number | string
  name: string
  username: string
  email: string
  website: string
}

const page = ref(1)
const pageSize = ref(3)
const totalUser: User[] = [
  {
    id: 1,
    name: 'Leanne Graham',
    username: 'Bret',
    email: 'Sincere@april.biz',
    website: 'hildegard.org',
  },
  {
    id: 2,
    name: 'Ervin Howell',
    username: 'Antonette',
    email: 'Shanna@melissa.tv',
    website: 'anastasia.net',
  },
  {
    id: 3,
    name: 'Clementine Bauch',
    username: 'Samantha',
    email: 'Nathan@yesenia.net',
    website: 'ramiro.info',
  },
  {
    id: 4,
    name: 'Patricia Lebsack',
    username: 'Karianne',
    email: 'Julianne.OConner@kory.org',
    website: 'kale.biz',
  },
  {
    id: 5,
    name: 'Chelsey Dietrich',
    username: 'Kamren',
    email: 'Lucio_Hettinger@annie.ca',
    website: 'demarco.info',
  },
  {
    id: 6,
    name: 'Mrs. Dennis Schulist',
    username: 'Leopoldo_Corkery',
    email: 'Karley_Dach@jasper.info',
    website: 'ola.org',
  },
  {
    id: 7,
    name: 'Kurtis Weissnat',
    username: 'Elwyn.Skiles',
    email: 'Telly.Hoeger@billy.biz',
    website: 'elvis.io',
  },
  {
    id: 8,
    name: 'Nicholas Runolfsdottir V',
    username: 'Maxime_Nienow',
    email: 'Sherwood@rosamond.me',
    website: 'jacynthe.com',
  },
  {
    id: 9,
    name: 'Glenna Reichert',
    username: 'Delphine',
    email: 'Chaim_McDermott@dana.io',
    website: 'conrad.com',
  },
  {
    id: 10,
    name: 'Clementina DuBuque',
    username: 'Moriah.Stanton',
    email: 'Rey.Padberg@karina.biz',
    website: 'ambrose.net',
  },
]
</script>

Single Selected

You can add the select functionality with a v-model in the table and the is-selected property

TIP

Using the data property in the tr is important as that is the data to be added to the v-model

Code copied

<template>
  <div class="center">
    <s-table v-model="selected">
      <template #thead>
        <s-tr>
          <s-th> Name </s-th>
          <s-th> Email </s-th>
          <s-th> Id </s-th>
        </s-tr>
      </template>
      <template #tbody>
        <s-tr v-for="(tr, i) in users" :key="i" :data="tr">
          <s-td>
            {{ tr.name }}
          </s-td>
          <s-td>
            {{ tr.email }}
          </s-td>
          <s-td>
            {{ tr.id }}
          </s-td>
        </s-tr>
      </template>
    </s-table>

    <span class="data-table">
      <pre>
        {{ selected ? selected : 'Select an item in the table' }}
      </pre>
    </span>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

type User = {
  id: number | string
  name: string
  username: string
  email: string
  website: string
}

const selected = ref<User>()

const users: User[] = [
  {
    id: 1,
    name: 'Leanne Graham',
    username: 'Bret',
    email: 'Sincere@april.biz',
    website: 'hildegard.org',
  },
  {
    id: 2,
    name: 'Ervin Howell',
    username: 'Antonette',
    email: 'Shanna@melissa.tv',
    website: 'anastasia.net',
  },
  {
    id: 3,
    name: 'Clementine Bauch',
    username: 'Samantha',
    email: 'Nathan@yesenia.net',
    website: 'ramiro.info',
  },
  {
    id: 4,
    name: 'Patricia Lebsack',
    username: 'Karianne',
    email: 'Julianne.OConner@kory.org',
    website: 'kale.biz',
  },
  {
    id: 5,
    name: 'Chelsey Dietrich',
    username: 'Kamren',
    email: 'Lucio_Hettinger@annie.ca',
    website: 'demarco.info',
  },
  {
    id: 6,
    name: 'Mrs. Dennis Schulist',
    username: 'Leopoldo_Corkery',
    email: 'Karley_Dach@jasper.info',
    website: 'ola.org',
  },
  {
    id: 7,
    name: 'Kurtis Weissnat',
    username: 'Elwyn.Skiles',
    email: 'Telly.Hoeger@billy.biz',
    website: 'elvis.io',
  },
  {
    id: 8,
    name: 'Nicholas Runolfsdottir V',
    username: 'Maxime_Nienow',
    email: 'Sherwood@rosamond.me',
    website: 'jacynthe.com',
  },
  {
    id: 9,
    name: 'Glenna Reichert',
    username: 'Delphine',
    email: 'Chaim_McDermott@dana.io',
    website: 'conrad.com',
  },
  {
    id: 10,
    name: 'Clementina DuBuque',
    username: 'Moriah.Stanton',
    email: 'Rey.Padberg@karina.biz',
    website: 'ambrose.net',
  },
]
</script>

Multiple Selected

You can do multiple select functionality in the table with the v-model property with its value being an array

for this functionality you can use for example the Sax Design checkboxes and the function toggleSelectAll in the checkbox of th

Code copied

<template>
  <div class="center">
    <s-table v-model="selected" multiple>
      <template #header>
        <s-input
          v-model="search"
          block
          type="url"
          input-style="border"
          placeholder="Search"
        />
      </template>
      <template #thead>
        <s-tr>
          <s-th>
            <s-checkbox
              :checked-force="selected.length > 0"
              :indeterminate="selected.length < users.length"
              @change="selected = toggleSelectAll(selected, getSearch)"
            />
          </s-th>
          <s-th> Name </s-th>
          <s-th> Email </s-th>
          <s-th> Id </s-th>
        </s-tr>
      </template>
      <template #tbody>
        <s-tr v-for="(tr, i) in users" :key="i" :data="tr">
          <s-td checkbox>
            <s-checkbox v-model="selected" :value="tr" />
          </s-td>
          <s-td>
            {{ tr.name }}
          </s-td>
          <s-td>
            {{ tr.email }}
          </s-td>
          <s-td>
            {{ tr.id }}
          </s-td>
        </s-tr>
      </template>
    </s-table>
    <span class="data-table">
      <pre>
        {{ selected.length > 0 ? selected : 'Select an item in the table' }}
      </pre>
    </span>
  </div>
</template>

<script lang="ts" setup>
import { computed, ref } from 'vue'
import { toggleSelectAll } from 'sax-design-vue'

type User = {
  id: number | string
  name: string
  username: string
  email: string
  website: string
}

const search = ref('')
const selected = ref<User[]>([])
const users = ref<User[]>([
  {
    id: 1,
    name: 'Leanne Graham',
    username: 'Bret',
    email: 'Sincere@april.biz',
    website: 'hildegard.org',
  },
  {
    id: 2,
    name: 'Ervin Howell',
    username: 'Antonette',
    email: 'Shanna@melissa.tv',
    website: 'anastasia.net',
  },
  {
    id: 3,
    name: 'Clementine Bauch',
    username: 'Samantha',
    email: 'Nathan@yesenia.net',
    website: 'ramiro.info',
  },
  {
    id: 4,
    name: 'Patricia Lebsack',
    username: 'Karianne',
    email: 'Julianne.OConner@kory.org',
    website: 'kale.biz',
  },
  {
    id: 5,
    name: 'Chelsey Dietrich',
    username: 'Kamren',
    email: 'Lucio_Hettinger@annie.ca',
    website: 'demarco.info',
  },
  {
    id: 6,
    name: 'Mrs. Dennis Schulist',
    username: 'Leopoldo_Corkery',
    email: 'Karley_Dach@jasper.info',
    website: 'ola.org',
  },
  {
    id: 7,
    name: 'Kurtis Weissnat',
    username: 'Elwyn.Skiles',
    email: 'Telly.Hoeger@billy.biz',
    website: 'elvis.io',
  },
  {
    id: 8,
    name: 'Nicholas Runolfsdottir V',
    username: 'Maxime_Nienow',
    email: 'Sherwood@rosamond.me',
    website: 'jacynthe.com',
  },
  {
    id: 9,
    name: 'Glenna Reichert',
    username: 'Delphine',
    email: 'Chaim_McDermott@dana.io',
    website: 'conrad.com',
  },
  {
    id: 10,
    name: 'Clementina DuBuque',
    username: 'Moriah.Stanton',
    email: 'Rey.Padberg@karina.biz',
    website: 'ambrose.net',
  },
])

const getSearch = computed(() => {
  return users.value.filter((e) =>
    e.name.toLowerCase().includes(search.value.toLowerCase())
  )
})
</script>

Expandable data

To add a tr that can display expanded data use the#expand slot inside the s-tr component.

Code copied

<template>
  <div class="center">
    <s-table>
      <template #thead>
        <s-tr>
          <s-th> Name </s-th>
          <s-th> Email </s-th>
          <s-th> Id </s-th>
        </s-tr>
      </template>
      <template #tbody>
        <s-tr v-for="(tr, i) in users" :key="i" :data="tr">
          <s-td>
            {{ tr.name }}
          </s-td>
          <s-td>
            {{ tr.email }}
          </s-td>
          <s-td>
            {{ tr.id }}
          </s-td>

          <template #expand>
            <div class="con-content">
              <div>
                <s-avatar>
                  <img :src="`/avatars/avatar-${i + 1}.png`" alt="" />
                </s-avatar>
                <p>
                  {{ tr.name }}
                </p>
              </div>
              <div>
                <s-button type="flat" icon>
                  <s-icon  name="bx:lock-open-alt" />
                </s-button>
                <s-button type="flat" icon> Send Email </s-button>
                <s-button type="border" color="danger"> Remove User </s-button>
              </div>
            </div>
          </template>
        </s-tr>
      </template>
    </s-table>
  </div>
</template>

<script lang="ts" setup>

  id: number | string
  name: string
  username: string
  email: string
  website: string
}

const users: User[] = [
  {
    id: 1,
    name: 'Leanne Graham',
    username: 'Bret',
    email: 'Sincere@april.biz',
    website: 'hildegard.org',
  },
  {
    id: 2,
    name: 'Ervin Howell',
    username: 'Antonette',
    email: 'Shanna@melissa.tv',
    website: 'anastasia.net',
  },
  {
    id: 3,
    name: 'Clementine Bauch',
    username: 'Samantha',
    email: 'Nathan@yesenia.net',
    website: 'ramiro.info',
  },
  {
    id: 4,
    name: 'Patricia Lebsack',
    username: 'Karianne',
    email: 'Julianne.OConner@kory.org',
    website: 'kale.biz',
  },
  {
    id: 5,
    name: 'Chelsey Dietrich',
    username: 'Kamren',
    email: 'Lucio_Hettinger@annie.ca',
    website: 'demarco.info',
  },
  {
    id: 6,
    name: 'Mrs. Dennis Schulist',
    username: 'Leopoldo_Corkery',
    email: 'Karley_Dach@jasper.info',
    website: 'ola.org',
  },
  {
    id: 7,
    name: 'Kurtis Weissnat',
    username: 'Elwyn.Skiles',
    email: 'Telly.Hoeger@billy.biz',
    website: 'elvis.io',
  },
  {
    id: 8,
    name: 'Nicholas Runolfsdottir V',
    username: 'Maxime_Nienow',
    email: 'Sherwood@rosamond.me',
    website: 'jacynthe.com',
  },
  {
    id: 9,
    name: 'Glenna Reichert',
    username: 'Delphine',
    email: 'Chaim_McDermott@dana.io',
    website: 'conrad.com',
  },
  {
    id: 10,
    name: 'Clementina DuBuque',
    username: 'Moriah.Stanton',
    email: 'Rey.Padberg@karina.biz',
    website: 'ambrose.net',
  },
]
</script>

<style lang="scss" scoped>

Edit data

You can edit the data inside the table easily using the s-dialog component and the magic of vuejs

Code copied

<template>
  <div class="center">
    <s-table>
      <template #thead>
        <s-tr>
          <s-th> Name </s-th>
          <s-th> Email </s-th>
          <s-th> Id </s-th>
        </s-tr>
      </template>
      <template #tbody>
        <s-tr v-for="(tr, i) in users" :key="i" :data="tr">
          <s-td
            edit
            @click=";(edit = tr), (editProp = 'name'), (editActive = true)"
          >
            {{ tr.name }}
          </s-td>
          <s-td
            edit
            @click=";(edit = tr), (editProp = 'email'), (editActive = true)"
          >
            {{ tr.email }}
          </s-td>
          <s-td>
            {{ tr.id }}
          </s-td>
        </s-tr>
      </template>
    </s-table>

    <s-dialog v-model="editActive">
      <template #header> Change Prop {{ editProp }} </template>
      <s-input
        v-if="editProp == 'email'"
        v-model="edit[editProp]"
        block
        @keypress.enter="editActive = false"
      />
      <s-select
        v-if="editProp == 'name'"
        v-model="edit[editProp]"
        block
        placeholder="Select"
        @change="editActive = false"
      >
        <s-option label="Sax Design" value="Sax Design"> Sax Design </s-option>
        <s-option label="Vue" value="Vuejs"> Vue </s-option>
        <s-option label="Javascript" value="Javascript"> Javascript </s-option>
        <s-option disabled label="Sass" value="Sass"> Sass </s-option>
        <s-option label="Typescript" value="Typescript"> Typescript </s-option>
        <s-option label="Webpack" value="Webpack"> Webpack </s-option>
        <s-option label="Nodejs" value="Nodejs"> Nodejs </s-option>
      </s-select>
    </s-dialog>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

  id: number | string
  name: string
  username: string
  email: string
  website: string
}

const edit = ref<Pick<User, 'name' | 'email'>>({ name: '', email: '' })
const editProp = ref<keyof typeof edit.value>()
const editActive = ref<boolean>(false)

const users = ref<User[]>([
  {
    id: 1,
    name: 'Leanne Graham',
    username: 'Bret',
    email: 'Sincere@april.biz',
    website: 'hildegard.org',
  },
  {
    id: 2,
    name: 'Ervin Howell',
    username: 'Antonette',
    email: 'Shanna@melissa.tv',
    website: 'anastasia.net',
  },
  {
    id: 3,
    name: 'Clementine Bauch',
    username: 'Samantha',
    email: 'Nathan@yesenia.net',
    website: 'ramiro.info',
  },
  {
    id: 4,
    name: 'Patricia Lebsack',
    username: 'Karianne',
    email: 'Julianne.OConner@kory.org',
    website: 'kale.biz',
  },
  {
    id: 5,
    name: 'Chelsey Dietrich',
    username: 'Kamren',
    email: 'Lucio_Hettinger@annie.ca',
    website: 'demarco.info',
  },
  {
    id: 6,
    name: 'Mrs. Dennis Schulist',
    username: 'Leopoldo_Corkery',
    email: 'Karley_Dach@jasper.info',
    website: 'ola.org',
  },
  {
    id: 7,
    name: 'Kurtis Weissnat',
    username: 'Elwyn.Skiles',
    email: 'Telly.Hoeger@billy.biz',
    website: 'elvis.io',
  },
  {
    id: 8,
    name: 'Nicholas Runolfsdottir V',
    username: 'Maxime_Nienow',
    email: 'Sherwood@rosamond.me',
    website: 'jacynthe.com',
  },
  {
    id: 9,
    name: 'Glenna Reichert',
    username: 'Delphine',
    email: 'Chaim_McDermott@dana.io',
    website: 'conrad.com',
  },
  {
    id: 10,
    name: 'Clementina DuBuque',
    username: 'Moriah.Stanton',
    email: 'Rey.Padberg@karina.biz',
    website: 'ambrose.net',
  },
])
</script>

Sort

Sort functionality is independent and you can use the global function sortData

TIP

The sortData function needs 4 parameters: the event, the data of the table, the number of items to be ordered, and the sort type

Copied

/**
 * return array was sorted
 */
declare function sortData<T extends Record<string, unknown>>(
  event: Event,
  arr: T[],
  sortKey: keyof T,
  sortType?: 'desc' | 'esc'
): T[]

Code copied

<template>
  <div class="center">
    <s-table>
      <template #thead>
        <s-tr>
          <s-th sort @click="users = sortData($event, users, 'name')">
            Name
          </s-th>
          <s-th sort @click="users = sortData($event, users, 'email')">
            Email
          </s-th>
          <s-th sort @click="users = sortData($event, users, 'id')"> Id </s-th>
        </s-tr>
      </template>
      <template #tbody>
        <s-tr v-for="(tr, i) in users" :key="i" :data="tr">
          <s-td>
            {{ tr.name }}
          </s-td>
          <s-td>
            {{ tr.email }}
          </s-td>
          <s-td>
            {{ tr.id }}
          </s-td>
        </s-tr>
      </template>
    </s-table>
  </div>
</template>

<script lang="ts" setup>

import { sortData } from 'sax-design-vue'

type User = {
  id: number | string
  name: string
  username: string
  email: string
  website: string
}

const users = ref<User[]>([
  {
    id: 1,
    name: 'Leanne Graham',
    username: 'Bret',
    email: 'Sincere@april.biz',
    website: 'hildegard.org',
  },
  {
    id: 2,
    name: 'Ervin Howell',
    username: 'Antonette',
    email: 'Shanna@melissa.tv',
    website: 'anastasia.net',
  },
  {
    id: 3,
    name: 'Clementine Bauch',
    username: 'Samantha',
    email: 'Nathan@yesenia.net',
    website: 'ramiro.info',
  },
  {
    id: 4,
    name: 'Patricia Lebsack',
    username: 'Karianne',
    email: 'Julianne.OConner@kory.org',
    website: 'kale.biz',
  },
  {
    id: 5,
    name: 'Chelsey Dietrich',
    username: 'Kamren',
    email: 'Lucio_Hettinger@annie.ca',
    website: 'demarco.info',
  },
  {
    id: 6,
    name: 'Mrs. Dennis Schulist',
    username: 'Leopoldo_Corkery',
    email: 'Karley_Dach@jasper.info',
    website: 'ola.org',
  },
  {
    id: 7,
    name: 'Kurtis Weissnat',
    username: 'Elwyn.Skiles',
    email: 'Telly.Hoeger@billy.biz',
    website: 'elvis.io',
  },
  {
    id: 8,
    name: 'Nicholas Runolfsdottir V',
    username: 'Maxime_Nienow',
    email: 'Sherwood@rosamond.me',
    website: 'jacynthe.com',
  },
  {
    id: 9,
    name: 'Glenna Reichert',
    username: 'Delphine',
    email: 'Chaim_McDermott@dana.io',
    website: 'conrad.com',
  },
  {
    id: 10,
    name: 'Clementina DuBuque',
    username: 'Moriah.Stanton',
    email: 'Rey.Padberg@karina.biz',
    website: 'ambrose.net',
  },
])
</script>

Miscellaneous

This is a sample of everything united and its functionality together

Code copied

<template>
  <div class="center">
    <s-table v-model="selected" multiple>
      <template #header>
        <s-input
          v-model="search"
          block
          type="url"
          input-style="border"
          placeholder="Search"
        />
      </template>
      <template #thead>
        <s-tr>
          <s-th>
            <s-checkbox
              :checked-force="selected.length > 0"
              :indeterminate="selected.length < users.length"
              @change="selected = toggleSelectAll(selected, getSearch)"
            />
          </s-th>
          <s-th sort @click="users = sortData($event, users, 'name')">
            Name
          </s-th>
          <s-th sort @click="users = sortData($event, users, 'email')">
            Email
          </s-th>
          <s-th sort @click="users = sortData($event, users, 'id')"> Id </s-th>
        </s-tr>
      </template>
      <template #tbody>
        <s-tr
          v-for="(tr, i) in getPage(getSearch, page, pageSize)"
          :key="i"
          :data="tr"
          not-click-selected
          open-expand-only-td
        >
          <s-td checkbox>
            <s-checkbox v-model="selected" :value="tr" />
          </s-td>
          <s-td
            edit
            @click=";(edit = tr), (editProp = 'name'), (editActive = true)"
          >
            {{ tr.name }}
          </s-td>
          <s-td>
            {{ tr.email }}
          </s-td>
          <s-td>
            {{ tr.id }}
          </s-td>

          <template #expand>
            <div class="con-content">
              <div>
                <s-avatar>
                  <img :src="`/avatars/avatar-${i + 1}.png`" alt="" />
                </s-avatar>
                <p>
                  {{ tr.name }}
                </p>
              </div>
              <div>
                <s-button type="flat" icon>
                  <s-icon  name="bx:lock-open-alt" />
                </s-button>
                <s-button type="flat" icon> Send Email </s-button>
                <s-button type="border" color="danger"> Remove User </s-button>
              </div>
            </div>
          </template>
        </s-tr>
      </template>
      <template #footer>
        <s-pagination
          v-model:current-page="page"
          v-model:page-size="pageSize"
          :page-sizes="[3, 5, 7]"
          :total="getSearch.length"
          progress
          infinite
        />
      </template>
    </s-table>

    <s-dialog v-model="editActive">
      <template #header> Change Prop {{ editProp }} </template>
      <s-input
        v-if="editProp == 'email'"
        v-model="edit[editProp]"
        @keypress.enter="editActive = false"
      />
      <s-select
        v-if="editProp == 'name'"
        v-model="edit[editProp]"
        block
        placeholder="Select"
        @change="editActive = false"
      >
        <s-option label="Sax Design" value="Sax Design"> Sax Design </s-option>
        <s-option label="Vue" value="Vuejs"> Vue </s-option>
        <s-option label="Javascript" value="Javascript"> Javascript </s-option>
        <s-option disabled label="Sass" value="Sass"> Sass </s-option>
        <s-option label="Typescript" value="Typescript"> Typescript </s-option>
        <s-option label="Webpack" value="Webpack"> Webpack </s-option>
        <s-option label="Nodejs" value="Nodejs"> Nodejs </s-option>
      </s-select>
    </s-dialog>
  </div>
</template>

<script lang="ts" setup>
import { computed, ref } from 'vue'
import { getPage, sortData, toggleSelectAll } from 'sax-design-vue'

type User = {
  id: number | string
  name: string
  username: string

  website: string
}

const editActive = ref(false)
const edit = ref<Pick<User, 'name' | 'email'>>({ name: '', email: '' })
const editProp = ref<keyof typeof edit.value>()
const search = ref('')
const page = ref(1)
const pageSize = ref(4)
const selected = ref<User[]>([])

const users = ref<User[]>([
  {
    id: 1,
    name: 'Leanne Graham',
    username: 'Bret',
    email: 'Sincere@april.biz',
    website: 'hildegard.org',
  },
  {
    id: 2,
    name: 'Ervin Howell',
    username: 'Antonette',
    email: 'Shanna@melissa.tv',
    website: 'anastasia.net',
  },
  {
    id: 3,
    name: 'Clementine Bauch',
    username: 'Samantha',
    email: 'Nathan@yesenia.net',
    website: 'ramiro.info',
  },
  {
    id: 4,
    name: 'Patricia Lebsack',
    username: 'Karianne',
    email: 'Julianne.OConner@kory.org',
    website: 'kale.biz',
  },
  {
    id: 5,
    name: 'Chelsey Dietrich',
    username: 'Kamren',
    email: 'Lucio_Hettinger@annie.ca',
    website: 'demarco.info',
  },
  {
    id: 6,
    name: 'Mrs. Dennis Schulist',
    username: 'Leopoldo_Corkery',
    email: 'Karley_Dach@jasper.info',
    website: 'ola.org',
  },
  {
    id: 7,
    name: 'Kurtis Weissnat',
    username: 'Elwyn.Skiles',
    email: 'Telly.Hoeger@billy.biz',
    website: 'elvis.io',
  },
  {
    id: 8,
    name: 'Nicholas Runolfsdottir V',
    username: 'Maxime_Nienow',
    email: 'Sherwood@rosamond.me',
    website: 'jacynthe.com',
  },
  {
    id: 9,
    name: 'Glenna Reichert',
    username: 'Delphine',
    email: 'Chaim_McDermott@dana.io',
    website: 'conrad.com',
  },
  {
    id: 10,
    name: 'Clementina DuBuque',
    username: 'Moriah.Stanton',
    email: 'Rey.Padberg@karina.biz',
    website: 'ambrose.net',
  },
])

const getSearch = computed(() => {
  return users.value.filter((e) =>
    e.name.toLowerCase().includes(search.value.toLowerCase())
  )
})
</script>

<style lang="scss" scoped>
.con-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  & > div {
    display: flex;

    justify-content: center;
    p {
      margin-left: 10px;
    }
  }
}
</style>

Functions

We create this component with a different logic and maybe something not very common as a first point we want development to be more free and for the programmer to have many options and customization based on what he needs and wants to create, for example a very important theme it is the queries of the data in the server and that now they are not manipulated by the component until you yourself using a Sax Design function impose it

So now we use functions that you can use if you need them such as:

toggleSelectAll

See the Example:

Copied

/**
 * return empty array if all items are in selected, otherwise return originalData
 *
 * @param selected Array
 * @param originalData Array
 *
 * @returns Array
 */
declare function toggleSelectAll<T = any>(selected: T[], originalData: T[]): T[]

sortData

See the Example:

Copied

/**
 * return array was sorted
 */
declare function sortData<T extends Record<string, unknown>>(
  event: Event,
  arr: T[],
  sortKey: keyof T,
  sortType?: 'desc' | 'esc'
): T[]

API