[FEATURE] - MazDataTable

[Caio Emidio de Andrade Carnelós]

Is your feature request related to a problem? Please describe.
In my project (ERP) i have the use of many tables. Maybe have a MazDataTable would be a great addition to the UI.

Describe the solution you'd like
Possibility to:

• Input Headers
• Data
• Custom Data
• Sortable

Describe alternatives you've considered
its 100% possible to do separate. Its just to grow the UI.

Additional context
If need another Add Context. I will be happy to help

[Mazel]

Hey,

Yes, it's a good idea and I want to do this for a long time!
Do you have examples or specs to share me?

Thanks

[Caio Emidio de Andrade Carnelós]

<template>
  <div class="overflow-x-auto">
    <table class="min-w-full divide-y divide-gray-200">
      <thead>
        <tr>
          <th
            v-for="column in headers"
            :key="column.key"
            @click="sortBy(column)"
            :class="{ sortable: column.sorted }"
            class=" py-3 bg-gray-50 dark:bg-black/70 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
          >
            {{ column.label }}
            <span v-if="column.sorted && sortByColumn === column.key">
              {{ sortDirection === "asc" ? "▲" : "▼" }}
            </span>
          </th>
        </tr>
      </thead>
      <tbody class="bg-white dark:bg-black divide-y divide-gray-200">
        <tr v-for="item in sortedItems" :key="item.id">
          <td v-for="column in headers" :key="column.key" class="px-6 py-4 whitespace-nowrap">
            <slot :name="column.key" :item="item">{{ item[column.key] }}</slot>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  props: {
    headers: Array,
    items: Array,
  },
  data() {
    return {
      sortByColumn: null,
      sortDirection: "asc",
    };
  },
  computed: {
    sortedItems() {
      if (this.sortByColumn) {
        const direction = this.sortDirection === "asc" ? 1 : -1;
        return this.items.slice().sort((a, b) => {
          return a[this.sortByColumn] < b[this.sortByColumn]
            ? -direction
            : direction;
        });
      }
      return this.items;
    },
  },
  methods: {
    sortBy(column) {
      if (column.sorted) {
        if (this.sortByColumn === column.key) {
          this.sortDirection = this.sortDirection === "asc" ? "desc" : "asc";
        } else {
          this.sortByColumn = column.key;
          this.sortDirection = "asc";
        }
      }
    },
  },
};
</script>

Example of use:

<template>
<table :headers="headers" :items="items">
    <template v-slot:active="useSlots">
      <icon
        :name="
          useSlots.item.active
            ? 'heroicons:check-circle-20-solid'
            : 'heroicons:x-circle-20-solid'
        "
        :color="useSlots.item.active ? '#4ade80' : '#f87171'"
        class="w-6 h-6"
      />
    </template>
    <template v-slot:actions="useSlots">
      <icon
        name="heroicons:pencil-square-20-solid"
        class="w-6 h-6 cursor-pointer"
        @click="routeChange(`/organisation/bank/edit/${useSlots.item._id}`)"
      />
    </template>
 </table>
</template>

const headers = ref([
  { key: "name", label: "Name", sorted: true },
  { key: "relationedAccount", label: "Relationed Account", sorted: true },
  { key: "active", label: "Active", sorted: true },
  { key: "actions", label: "Actions", sorted: false },
]);

[Caio Emidio de Andrade Carnelós]

Look if that could help you :)

[Caio Emidio de Andrade Carnelós]

i have other features then i would like to implement on UI.
SideBar, Navbar and etc..

[Mazel]

The sidebar already exists, check out the MazDrawer component

For the navbar, I don't think it will ever exist. It’s really simple to do and depends on each project. I only make useful and complex components from now on. Nothing about layout.

[Mazel]

@caio-emidio

The component MazTable will be released soon, follow this PR: #829

I have to document it and write the tests before released and then all is good :)

[Caio Emidio de Andrade Carnelós]

Thanks for that!
Happy X-MAS

[Mazel]

The component "MazTable" is available in v3.30.0

• Release Note - https://github.com/LouisMazel/maz-ui/releases/tag/v3.30.0
• Documentation - https://louismazel.github.io/maz-ui-3/components/maz-table

Don't hesitate to ask me if you have any questions!

Merry x-mas @caio-emidio :)