Glide Data Grid - Tutorial

Interaktywny przewodnik po możliwościach Glide Data Grid. Każda sekcja to działające demo z opisem i przykładem kodu.

1. Edycja Inline

Kliknij dwukrotnie w komórkę i zacznij pisać. Zmiany zapisują się w stanie React.

// Kluczowe props:
allowOverlay: true  // włącza edycję
onCellEdited={(cell, newValue) => {
  // aktualizuj state
}}

2. Bubble Tags (jak Airtable)

Kolorowe tagi/etykiety w komórkach. Idealne dla statusów, tagów, kategorii.

// Użyj GridCellKind.Bubble:
{
  kind: GridCellKind.Bubble,
  data: ['tag1', 'tag2', 'tag3'],
  allowOverlay: false,
}

3. Checkbox (Boolean)

Kolumna z checkboxami. Kliknij żeby przełączyć. Idealne dla list todo.

// Użyj GridCellKind.Boolean:
{
  kind: GridCellKind.Boolean,
  data: true, // lub false
  allowOverlay: false,
}

4. Obrazki i Avatary

Wyświetlanie miniaturek, avatarów, logo w komórkach.

// Użyj GridCellKind.Image:
{
  kind: GridCellKind.Image,
  data: ['https://example.com/avatar.png'],
  allowOverlay: false,
  allowAdd: false,
}

5. Conditional Formatting

Kolorowanie komórek na podstawie wartości. Zielony = powyżej targetu, czerwony = poniżej.

// Użyj themeOverride:
{
  kind: GridCellKind.Number,
  data: value,
  themeOverride: {
    bgCell: '#dcfce7',  // kolor tła
    textDark: '#166534', // kolor tekstu
  },
}

6. Row Selection (zaznaczanie wierszy)

Zaznaczanie pojedynczych i wielu wierszy. Checkbox przy każdym wierszu.

// Kluczowe props:
rowMarkers="checkbox"
gridSelection={selection}
onGridSelectionChange={(sel) => {
  setSelection(sel)
}}

7. Context Menu (prawy klik)

Prawy klik na komórkę pokazuje własne menu kontekstowe.

// Użyj onCellContextMenu:
onCellContextMenu={([col, row], event) => {
  event.preventDefault()
  showMenu({ x: event.clientX, y: event.clientY, row, col })
}}

8. URI Links (klikalne linki)

Komórki z linkami - kliknięcie otwiera URL w nowej karcie.

// Użyj GridCellKind.Uri:
{
  kind: GridCellKind.Uri,
  data: 'https://example.com',
  hoverEffect: true,
}

9. Copy/Paste (Excel/Sheets)

Zaznacz komórki i skopiuj (Ctrl+C). Wklej dane z Excel/Google Sheets (Ctrl+V).

// Kluczowe props:
getCellsForSelection={true}  // włącza kopiowanie
onPaste={(target, values) => {
  // values to 2D array ze schowka
  updateData(target, values)
  return true
}}

10. Edytowalne z walidacją

Edytuj komórkę i wpisz wartość z listy dozwolonych. Kolorowanie według wartości.

// Edycja z walidacją:
const PRIORITIES = ['Low', 'Medium', 'High', 'Critical']

onCellEdited={([col, row], newValue) => {
  const match = PRIORITIES.find(
    p => p.toLowerCase() === newValue.data.toLowerCase()
  )
  if (match) updateData(row, match)
}}

// + themeOverride dla kolorów

11. Number Formatting

Formatowanie liczb: waluta (PLN), procenty, wyrównanie.

// Użyj Intl.NumberFormat:
const formatCurrency = (v) => new Intl.NumberFormat('pl-PL', {
  style: 'currency', currency: 'PLN'
}).format(v)

{
  kind: GridCellKind.Number,
  displayData: formatCurrency(1299.99),
  contentAlign: 'right',
}

12. Column Resize

Przeciągnij krawędź nagłówka żeby zmienić szerokość kolumny.

// Kluczowe props:
onColumnResize={(column, newSize) => {
  setColumns(prev => {
    const next = [...prev]
    const idx = next.findIndex(c => c.id === column.id)
    next[idx] = { ...next[idx], width: newSize }
    return next
  })
}}

13. Large Dataset (100k wierszy)

Virtual scrolling - tylko widoczne wiersze są renderowane. Przewijaj płynnie!

// Glide obsługuje ogromne zbiory danych:
<DataEditor
  rows={100_000}
  getCellContent={([col, row]) => {
    // Generuj dane na żądanie
    return generateCell(col, row)
  }}
  smoothScrollX
  smoothScrollY
/>

14. Freeze Columns

Zamroź kolumny z lewej strony - zostają na miejscu podczas przewijania.

// Zamroź pierwszą kolumnę:
<DataEditor
  freezeColumns={1}
  columns={columns}
  // ...
/>

15. Markdown Cells

Komórki z formatowaniem Markdown - bold, italic, listy. Kliknij żeby zobaczyć.

// Użyj GridCellKind.Markdown:
{
  kind: GridCellKind.Markdown,
  data: '**Bold** i _italic_ oraz `code`',
  allowOverlay: true,
}

16. Search & Highlight

Wyszukiwanie z podświetleniem pasujących komórek.

// Użyj highlightRegions:
<DataEditor
  highlightRegions={matches.map(m => ({
    x: m.col, y: m.row,
    width: 1, height: 1,
    color: '#fef08a80',
    style: 'solid',
  }))}
/>

17. Header Groups

Wielopoziomowe nagłówki - grupowanie kolumn według kategorii.

// Użyj columns.group:
const columns = [
  { title: 'Śródroczna', group: 'Matematyka' },
  { title: 'Końcowa', group: 'Matematyka' },
  { title: 'Śródroczna', group: 'Fizyka' },
  { title: 'Końcowa', group: 'Fizyka' },
]

18. Custom Cell Renderer

Rysuj cokolwiek w komórce: progress bar, sparkline, wykresy.

// CustomRenderer z Canvas API:
const progressRenderer = {
  kind: GridCellKind.Custom,
  isMatch: (cell) => cell.data?.kind === 'progress',
  draw: ({ ctx, rect, cell }) => {
    const { value, color } = cell.data
    ctx.fillStyle = color
    ctx.fillRect(x, y, width * value/100, height)
    return true
  },
}

19. Trailing Row (dodawanie)

Ostatni wiersz "Dodaj nowy..." - kliknij żeby dodać rekord.

// Użyj trailingRowOptions:
<DataEditor
  trailingRowOptions={{
    sticky: true,
    tint: true,
    hint: '+ Dodaj kontakt...',
  }}
  onRowAppended={() => {
    setData([...data, newRow])
  }}
/>

20. Custom Theme

Pełna customizacja kolorów, czcionek i stylów całej tabeli.

// Użyj theme prop:
const darkTheme = {
  bgCell: '#1e1e2e',
  bgHeader: '#11111b',
  textDark: '#cdd6f4',
  accentColor: '#8b5cf6',
  borderColor: '#313244',
  fontFamily: 'JetBrains Mono',
}
<DataEditor theme={darkTheme} />

21. Row Reordering

Przeciągnij numer wiersza żeby zmienić kolejność.

// Użyj rowMarkers + onRowMoved:
<DataEditor
  rowMarkers="clickable-number"
  onRowMoved={(from, to) => {
    const next = [...data]
    const [removed] = next.splice(from, 1)
    next.splice(to, 0, removed)
    setData(next)
  }}
/>

Więcej możliwości

Typy komórek

  • • Markdown
  • • Number (formatowanie)
  • • Dropdown
  • • Custom renderer

Interakcje

  • • Drag & drop wierszy
  • • Resize kolumn
  • • Reorder kolumn
  • • Search/highlight

Performance

  • • Infinite scroll
  • • Lazy loading
  • • 100k+ wierszy
  • • Canvas rendering
Glide Data Grid na GitHub • Oficjalne demo (Storybook)