<script setup lang="ts">
import { Grid, type CellRendererParams } from "gp-grid-vue";
import { h } from "vue";

const StatusRenderer = (params: CellRendererParams) => {
  const status = params.value as string;
  const color = status === "Active" ? "green" : "red";

  return h("div", {
    class: "flex items-center h-full px-2",
  }, [
    h("span", {
      class: "w-2 h-2 rounded-full mr-2",
      style: { backgroundColor: color },
    }),
    status,
  ]);
};

const columns: ColumnDefinition[] = [
  { field: "name", cellDataType: "text", width: 150 },
  { field: "status", cellDataType: "text", width: 120, cellRenderer: "status" },
];
</script>

<template>
  <Grid
    :columns="columns"
    :row-data="data"
    :row-height="36"
    :cell-renderers="{ status: StatusRenderer }"
  />
</template>

<!-- StatusCell.vue -->
<script setup lang="ts">
import { type CellRendererParams } from "gp-grid-vue";

defineProps<CellRendererParams>();
</script>

<template>
  <div class="flex items-center h-full px-2">
    <span
      class="w-2 h-2 rounded-full mr-2"
      :style="{ backgroundColor: value === 'Active' ? 'green' : 'red' }"
    />
    {{ value }}
  </div>
</template>

<!-- Parent component -->
<script setup lang="ts">
import { Grid } from "gp-grid-vue";
import StatusCell from "./StatusCell.vue";
import { h } from "vue";

const StatusRenderer = (params: CellRendererParams) => {
  return h(StatusCell, params);
};
</script>

<script setup lang="ts">
import { type HeaderRendererParams } from "gp-grid-vue";
import { h } from "vue";

const CustomHeader = (params: HeaderRendererParams) => {
  return h("div", {
    class: "flex items-center justify-between w-full h-full px-2",
  }, [
    h("span", { class: "font-bold" }, params.column.headerName),
    params.sortDirection && h("span", {},
      params.sortDirection === "asc" ? "▲" : "▼"
    ),
  ]);
};
</script>

<template>
  <Grid
    :columns="columns"
    :row-data="data"
    :row-height="36"
    :header-renderer="CustomHeader"
  />
</template>