Column Types

OGrid provides built-in column types that automatically configure alignment, display formatting, cell editors, and filter types. Set type on a column definition to opt in.

Available Types

Type	Alignment	Default Editor	Default Filter	Display Format
'text'	Left (default)	Text input	Text search	String()
'numeric'	Right	Text input	Text search	String()
'date'	Left	Date picker	Date range (from/to)	toLocaleDateString()
'boolean'	Center	Checkbox	-	True / False

Quick Example

const columns = [
  { columnId: 'name', name: 'Name' },
  { columnId: 'age', name: 'Age', type: 'numeric' },
  {
    columnId: 'hireDate',
    name: 'Hire Date',
    type: 'date',
    filterable: { type: 'date' },
  },
  {
    columnId: 'active',
    name: 'Active',
    type: 'boolean',
    editable: true,
  },
];

Usage

React

import { OGrid } from '@alaarab/ogrid-react-radix';

function App() {
  return (
    <OGrid
      columns={columns}
      data={data}
      getRowId={(r) => r.id}
      editable
    />
  );
}

Switching UI libraries

The OGrid component has the same props across all React UI packages. To switch, just change the import:

• Radix (lightweight, default): from '@alaarab/ogrid-react-radix'
• Fluent UI (Microsoft 365 / SPFx): from '@alaarab/ogrid-react-fluent' - wrap in <FluentProvider>
• Material UI (MUI v7): from '@alaarab/ogrid-react-material' - wrap in <ThemeProvider>

Angular

import { Component } from '@angular/core';
import { OGridComponent } from '@alaarab/ogrid-angular-material';

@Component({
  standalone: true,
  imports: [OGridComponent],
  template: `<ogrid [props]="gridProps" />`
})
export class GridComponent {
  gridProps = {
    columns: columns,
    data: data,
    getRowId: (r: Row) => r.id,
    editable: true,
  };
}

Switching UI libraries

Same component API across Angular packages. To switch, just change the import:

• Radix (CDK): from '@alaarab/ogrid-angular-radix' (default, lightweight)
• Angular Material: from '@alaarab/ogrid-angular-material'
• PrimeNG: from '@alaarab/ogrid-angular-primeng'

All components are standalone - no NgModule required.

Vue

<script setup lang="ts">
import { OGrid } from '@alaarab/ogrid-vue-vuetify';

const gridProps = {
  columns,
  data,
  getRowId: (r) => r.id,
  editable: true,
};
</script>

<template>
  <OGrid :gridProps="gridProps" />
</template>

Switching UI libraries

Same component API across Vue packages. To switch, just change the import:

• Radix (Headless UI): from '@alaarab/ogrid-vue-radix' (default, lightweight)
• Vuetify: from '@alaarab/ogrid-vue-vuetify' - wrap in <v-app> for theming
• PrimeVue: from '@alaarab/ogrid-vue-primevue'

Vanilla JS

import { OGrid } from '@alaarab/ogrid-js';
import '@alaarab/ogrid-js/styles';

const grid = new OGrid(document.getElementById('grid'), {
  columns: columns,
  data: data,
  getRowId: (r) => r.id,
  editable: true,
});

Date Columns

Setting type: 'date' provides:

• Display: Values are automatically formatted via toLocaleDateString() (unless you provide a custom valueFormatter or renderCell).
• Sorting: Dates are compared chronologically via Date.getTime(), not alphabetically.
• Cell editor: Uses <input type="date"> (native browser date picker) by default.
• Filter: When filterable: { type: 'date' } is set, the column header filter shows From and To date inputs. Both are optional - you can filter by "after", "before", or a range.

Date Filter Values

Date filter values use ISO YYYY-MM-DD strings wrapped in the FilterValue discriminated union:

// In IFilters
{ hireDate: { type: 'date', value: { from: '2024-01-01', to: '2024-12-31' } } }

Boolean Columns

Setting type: 'boolean' provides:

• Display: Shows True or False text (override with valueFormatter or renderCell).
• Alignment: Center-aligned.
• Cell editor: Defaults to checkbox editor.

Custom Formatting

The type sets sensible defaults, but you can always override with valueFormatter, renderCell, or cellEditor:

{
  columnId: 'hireDate',
  name: 'Hire Date',
  type: 'date',
  valueFormatter: (value) => new Date(String(value)).toLocaleDateString('en-US', {
    year: 'numeric', month: 'short', day: 'numeric',
  }),
}