Styling

Customize grid appearance in Vue applications.

Dark Mode

<script setup>
import { useDark } from "@vueuse/core";

const isDark = useDark();
</script>

<template>
  <Grid :dark-mode="isDark" ... />
</template>

With Nuxt Color Mode

<script setup>
const colorMode = useColorMode();
const isDark = computed(() => colorMode.value === "dark");
</script>

<template>
  <Grid :dark-mode="isDark" ... />
</template>

CSS Customization

/* In your global styles */
.gp-grid-header {
  background: linear-gradient(to right, #667eea, #764ba2);
}

.gp-grid-cell--active {
  outline: 2px solid #3b82f6;
}

.gp-grid-row:nth-child(even) {
  background-color: rgba(0, 0, 0, 0.02);
}

Scoped Styles

Use :deep() for scoped style overrides:

<style scoped>
:deep(.gp-grid-header) {
  background-color: var(--primary);
}

:deep(.gp-grid-cell--active) {
  outline-color: var(--accent);
}
</style>

Dynamic Class Computation

Use the highlighting prop to dynamically compute CSS classes for rows, columns, or cells based on data or interaction state.

highlighting Prop

interface HighlightingOptions<TData> {
  computeRowClasses?: (context: HighlightContext<TData>) => string[];
  computeColumnClasses?: (context: HighlightContext<TData>) => string[];
  computeCellClasses?: (context: HighlightContext<TData>) => string[];
}

Row Classes

Apply classes to entire rows based on row data or hover state:

<template>
  <Grid
    :columns="columns"
    :row-data="rowData"
    :highlighting="highlighting"
  />
</template>

<script setup lang="ts">
const highlighting = {
  computeRowClasses: (context) => {
    const classes: string[] = [];

    // Zebra striping
    if (context.rowIndex !== null && context.rowIndex % 2 === 1) {
      classes.push('zebra-row');
    }

    // Hover effect
    if (context.isHovered) {
      classes.push('row-highlight');
    }

    return classes;
  },
};
</script>

Column Classes

Apply classes to entire columns:

<script setup lang="ts">
const highlighting = {
  computeColumnClasses: (context) =>
    context.isHovered ? ['column-highlight'] : [],
};
</script>

Cell Classes

Apply classes to individual cells:

<script setup lang="ts">
const highlighting = {
  computeCellClasses: (context) => {
    if (context.isHovered) {
      return ['cell-highlight'];
    }
    return [];
  },
};
</script>

HighlightContext

All callbacks receive a context object with these properties:

Property	Type	Description
`rowIndex`	`number \| null`	Row index (null for column-only context)
`colIndex`	`number \| null`	Column index (null for row-only context)
`column`	`HighlightColumnInfo`	Column definition (for column/cell contexts)
`rowData`	`TData`	Row data (for row/cell contexts)
`isHovered`	`boolean`	Whether this row/column/cell is hovered
`isActive`	`boolean`	Whether this contains the active cell
`isSelected`	`boolean`	Whether this is in the selection range

For more examples, see the Highlighting Example.

Container Styling

<template>
  <div class="grid-container">
    <Grid ... />
  </div>
</template>

<style scoped>
.grid-container {
  height: 500px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
</style>

Styling

On this page