¶Installation

Elyra DataGrid is a monorepo of small packages. Install only what your client needs. Every setup requires a database connection and the server package.

Elyra DataGrid is commercial. You can evaluate it on local/dev domains without a key. See Licensing for plans and the runtime key.

¶0. Commercial installation (access token)

After purchase, elyracode.com issues a per-customer access token. Add the private repository and authenticate with the token — the packages then install like any Composer/npm dependency, with composer update support.

# Composer (PHP packages) — Composer >= 2.9
composer repo add private-packagist composer https://repo.packagist.com/elyra/

# Authenticate with the token from your account (do NOT commit it)
composer config --global --auth http-basic.repo.packagist.com <username> <access-token>

On Composer < 2.9 use composer config repositories.private-packagist composer https://repo.packagist.com/elyra/ instead of composer repo add.

This writes credentials to auth.json — keep it out of version control (commit an auth.json.dist without the token, or inject it in CI via the COMPOSER_AUTH env var). One token covers everything — the PHP packages and the JavaScript clients (Vue/Svelte/core/theme ship in the elyra/datagrid-js Composer package), so there is no separate npm registry. Then install the packages below and add your license key to .env.

Your token is issued per customer by elyracode.com and can be revoked at any time. Never share it or embed it in client-side code.

¶1. Database connection (ElyraSQL)

Add an ElyraSQL connection to config/database.php. It speaks the MySQL wire protocol, so it uses the mysql driver:

'elyrasql' => [
    'driver'    => 'mysql',
    'host'      => env('ELYRA_DB_HOST', '127.0.0.1'),
    'port'      => env('ELYRA_DB_PORT', '3307'),
    'database'  => env('ELYRA_DB_DATABASE', 'elyra'),
    'username'  => env('ELYRA_DB_USERNAME', 'root'),
    'password'  => env('ELYRA_DB_PASSWORD', ''),
    'charset'   => 'utf8mb4',
    'collation' => 'utf8mb4_unicode_ci',
    'prefix'    => '',
    'strict'    => false,
    'options'   => extension_loaded('pdo_mysql') ? [
        PDO::ATTR_EMULATE_PREPARES => true, // recommended for ElyraSQL
    ] : [],
],

# .env
ELYRA_DB_HOST=127.0.0.1
ELYRA_DB_PORT=3307
ELYRA_DB_DATABASE=elyra
ELYRA_DB_USERNAME=root
ELYRA_DB_PASSWORD=

You can also point the grid at your default connection — it works with any MySQL-compatible server via the generic mysql driver. ElyraSQL unlocks single-pass facets, WITH ROLLUP, PERCENTILE, and HYBRID search.

¶2. Server package (always required)

composer require elyra/datagrid-server

This pulls in elyra/datagrid-protocol. It provides Grid, GridDefinition, the ElyraSQL/MySQL drivers, mutations (editing) and streamed exports. See Defining grids.

Add your license key (required for production domains; dev is free):

# .env
ELYRA_DATAGRID_KEY=eyJpZCI6...

See Licensing.

¶3a. Livewire client

composer require elyra/datagrid-livewire

Requires Livewire 3.5+/4 and Flux UI. The service provider auto-registers views, translations, and inlines the theme CSS — no build step needed for the grid itself.

Publish translations (optional):

php artisan vendor:publish --tag=elyra-datagrid-lang

Continue to the Livewire client guide.

¶3b. Vue (Inertia) client

The Vue, Svelte, headless core and theme ship as JavaScript inside the elyra/datagrid-js Composer package — installed with the same token as the server, so there is no separate npm registry to configure.

composer require elyra/datagrid-js

Point Vite at the bundled sources under vendor/ (the @elyra/* specifiers map to them), then import the theme in your entry:

// vite.config.ts
import { fileURLToPath, URL } from 'node:url';
const dg = (p: string) => fileURLToPath(new URL(`vendor/elyra/datagrid-js/dist/${p}`, import.meta.url));

export default defineConfig({
  resolve: { alias: {
    '@elyra/datagrid-vue': dg('vue/index.ts'),
    '@elyra/datagrid-svelte': dg('svelte/index.ts'),
    '@elyra/datagrid-client-core': dg('core/index.ts'),
    '@elyra/datagrid-protocol': dg('protocol/index.ts'),
    '@elyra/datagrid-theme': dg('theme'),
  } },
  // ...plugins
});

// resources/js/app.ts
import '@elyra/datagrid-theme/theme.css';     // app-following base + dark mode
import '@elyra/datagrid-theme/accents.css';   // Flux-style accents (data-dg-accent)
import '@elyra/datagrid-theme/grid.css';      // component styles
// optional fixed preset:
// import '@elyra/datagrid-theme/tokyo-night.css';

Continue to the Vue client guide.

¶3c. Svelte (Inertia) client

Same elyra/datagrid-js package and Vite aliases as Vue (above) — import from @elyra/datagrid-svelte. Continue to the Svelte client guide.

¶Local development with path repositories

While developing against the monorepo, wire the PHP packages as Composer path repositories and the JS packages as Vite aliases.

composer.json:

{
  "repositories": [
    { "type": "path", "url": "../elyra-datagrid/packages/protocol" },
    { "type": "path", "url": "../elyra-datagrid/packages/server-laravel" },
    { "type": "path", "url": "../elyra-datagrid/packages/client-livewire" }
  ]
}

vite.config.ts:

import { fileURLToPath, URL } from 'node:url';
const dg = (p: string) => fileURLToPath(new URL(`../elyra-datagrid/packages/${p}`, import.meta.url));

export default defineConfig({
  resolve: {
    alias: {
      '@elyra/datagrid-vue': dg('client-vue/src/index.ts'),
      '@elyra/datagrid-client-core': dg('client-core/src/index.ts'),
      '@elyra/datagrid-protocol': dg('protocol/src/index.ts'),
      '@elyra/datagrid-theme': dg('theme'),
    },
  },
  // ...plugins
});

Next: Quick start.