Getting started

Installation

pnpm

pnpm add @datagrid/vue-ui

npm

npm install @datagrid/vue-ui

yarn

yarn add @datagrid/vue-ui

@datagrid/core is installed automatically as a dependency. Vue 3.3 or newer is required.

pnpm

pnpm add @datagrid/react-ui

npm

npm install @datagrid/react-ui

yarn

yarn add @datagrid/react-ui

@datagrid/core is installed automatically as a dependency. React 18 or newer is required.

Import the styles

The styles are shipped as a separate css file. Import it once, e.g. in your main.ts:

import "@datagrid/vue-ui/style.css";

import "@datagrid/react-ui/style.css";

Your first grid

<template>
  <div style="height: 400px; display: flex">
    <Datagrid :columns="columns" :rows="rows" />
  </div>
</template>

<script setup lang="ts">
import { Datagrid, type ColumnConfig } from "@datagrid/vue-ui";

type Person = { name: string; age: number; city: string };

const rows: Array<Person> = [
  { name: "Anna", age: 31, city: "Berlin" },
  { name: "Ben", age: 25, city: "Hamburg" },
  { name: "Clara", age: 40, city: "Vienna" },
];

const columns: Array<ColumnConfig<Person>> = [
  { field: "name", text: "Name", sortable: true, filterable: true },
  { field: "age", text: "Age", type: "number", sortable: true },
  { field: "city", text: "City", sortable: true, filterable: true },
];
</script>

import { Datagrid, type ColumnConfig } from "@datagrid/react-ui";

type Person = { name: string; age: number; city: string };

const rows: Array<Person> = [
  { name: "Anna", age: 31, city: "Berlin" },
  { name: "Ben", age: 25, city: "Hamburg" },
  { name: "Clara", age: 40, city: "Vienna" },
];

// defined outside of the component, so they are stable
const columns: Array<ColumnConfig<Person>> = [
  { field: "name", text: "Name", sortable: true, filterable: true },
  { field: "age", text: "Age", type: "number", sortable: true },
  { field: "city", text: "City", sortable: true, filterable: true },
];

export function Persons() {
  return (
    <div style={{ height: 400, display: "flex" }}>
      <Datagrid columns={columns} rows={rows} />
    </div>
  );
}

See React for the differences to the Vue component.

Size of the grid

The grid fills its parent element (width: 100%, flex: 1). Give the parent a height (or use it inside a flex layout), otherwise the grid has no space to render rows.

A more complete example

Most applications configure common column properties once with defaultColumn:

<template>
  <Datagrid :columns="columns" :rows="rows" :options="options" />
</template>

<script setup lang="ts">
import { Datagrid, type ColumnConfig, type GridOptions } from "@datagrid/vue-ui";
import { createEmployees, type Employee } from "./data";

const rows = createEmployees(1000);

const columns: Array<ColumnConfig<Employee>> = [
  { field: "id", text: "ID", type: "number", width: 70 },
  { field: "firstName", text: "First name" },
  { field: "lastName", text: "Last name" },
  { field: "department", text: "Department" },
  { field: "city", text: "City" },
  { field: "salary", text: "Salary", type: "number" },
  { field: "startDate", text: "Start date", type: "date" },
  { field: "active", text: "Active", type: "boolean", width: 80 },
];

const options: GridOptions<Employee> = {
  // properties for all columns
  defaultColumn: {
    sortable: true,
    filterable: true,
    resizeable: true,
    moveable: true,
    width: 130,
  },
};
</script>

import { Datagrid, type ColumnConfig, type GridOptions } from "@datagrid/react-ui";
import { createEmployees, type Employee } from "../data";

const rows = createEmployees(1000);

const columns: Array<ColumnConfig<Employee>> = [
  { field: "id", text: "ID", type: "number", width: 70 },
  { field: "firstName", text: "First name" },
  { field: "lastName", text: "Last name" },
  { field: "department", text: "Department" },
  { field: "city", text: "City" },
  { field: "salary", text: "Salary", type: "number" },
  { field: "startDate", text: "Start date", type: "date" },
  { field: "active", text: "Active", type: "boolean", width: 80 },
];

const options: GridOptions<Employee> = {
  // properties for all columns
  defaultColumn: {
    sortable: true,
    filterable: true,
    resizeable: true,
    moveable: true,
    width: 130,
  },
};

export default function Basic() {
  return <Datagrid columns={columns} rows={rows} options={options} />;
}

What's next?

• Column definitions – everything about columns
• Filtering and Sorting
• Editing
• Component API – props, events, v-model bindings and slots
• Grid API – methods of the grid instance