DataGrid

import * as React from 'react';
import { DataGrid } from '@bindshq/stance-react';
import type { DataGridColumn } from '@bindshq/stance-react';

interface Field {
  id: string;
  name: string;
  title: string;
  phone: string;
  office: string;
}

const offices = ['Ljubljana', 'London', 'Berlin', 'Lisbon'];

const titles = ['Account Executive', 'Legal Counsel', 'Finance Lead', 'Customer Success'];

const first = ['Priya', 'Amara', 'Lukas', 'Hana', 'Tomás', 'Owen', 'Zainab', 'Mateja'];

const last = ['Nair', 'Okafor', 'Brenner', 'Sato', 'Ruiz', 'Price', 'Haddad', 'Kovač'];

function makeFields(count: number): Field[] {
  return Array.from({ length: count }, (_, i) => ({
    id: `m${i}`,
    name: `${first[i % 8]} ${last[(i * 3) % 8]}`,
    title: titles[i % 4]!,
    phone: `+386 1 ${String(4000 + i).padStart(4, '0')} ${String(10 + (i % 90))}`,
    office: offices[i % 4]!,
  }));
}

const columns: DataGridColumn<Field>[] = [
  { id: 'name', header: 'Name', accessor: 'name', width: 180 },
  { id: 'title', header: 'Job title', accessor: 'title', editable: true, width: 200 },
  { id: 'phone', header: 'Phone', accessor: 'phone', editable: true, width: 170 },
  { id: 'office', header: 'Office', accessor: 'office', editable: true, width: 140 },
];

export function Basic() {
  const [data, setData] = React.useState(() => makeFields(40));
  return (
    <DataGrid
      aria-label="Signature fields"
      columns={columns}
      data={data}
      getRowId={(r) => r.id}
      height={320}
      onCellEdit={({ rowId, columnId, value }) =>
        setData((rows) => rows.map((r) => (r.id === rowId ? { ...r, [columnId]: value } : r)))
      }
    />
  );
}

import * as React from 'react';
import { DataGrid } from '@bindshq/stance-react';
import type { DataGridColumn } from '@bindshq/stance-react';

interface Field {
  id: string;
  name: string;
  title: string;
  phone: string;
  office: string;
}

const offices = ['Ljubljana', 'London', 'Berlin', 'Lisbon'];

const titles = ['Account Executive', 'Legal Counsel', 'Finance Lead', 'Customer Success'];

const first = ['Priya', 'Amara', 'Lukas', 'Hana', 'Tomás', 'Owen', 'Zainab', 'Mateja'];

const last = ['Nair', 'Okafor', 'Brenner', 'Sato', 'Ruiz', 'Price', 'Haddad', 'Kovač'];

function makeFields(count: number): Field[] {
  return Array.from({ length: count }, (_, i) => ({
    id: `m${i}`,
    name: `${first[i % 8]} ${last[(i * 3) % 8]}`,
    title: titles[i % 4]!,
    phone: `+386 1 ${String(4000 + i).padStart(4, '0')} ${String(10 + (i % 90))}`,
    office: offices[i % 4]!,
  }));
}

const columns: DataGridColumn<Field>[] = [
  { id: 'name', header: 'Name', accessor: 'name', width: 180 },
  { id: 'title', header: 'Job title', accessor: 'title', editable: true, width: 200 },
  { id: 'phone', header: 'Phone', accessor: 'phone', editable: true, width: 170 },
  { id: 'office', header: 'Office', accessor: 'office', editable: true, width: 140 },
];

export function LargeDataset() {
  const data = React.useMemo(() => makeFields(10000), []);
  return (
    <DataGrid
      aria-label="All mailboxes"
      columns={columns.map((c) => ({ ...c, editable: false }))}
      data={data}
      getRowId={(r) => r.id}
      height={360}
    />
  );
}

import { DataGrid } from '@bindshq/stance-react';
import type { DataGridColumn } from '@bindshq/stance-react';

interface Field {
  id: string;
  name: string;
  title: string;
  phone: string;
  office: string;
}

const offices = ['Ljubljana', 'London', 'Berlin', 'Lisbon'];

const titles = ['Account Executive', 'Legal Counsel', 'Finance Lead', 'Customer Success'];

const first = ['Priya', 'Amara', 'Lukas', 'Hana', 'Tomás', 'Owen', 'Zainab', 'Mateja'];

const last = ['Nair', 'Okafor', 'Brenner', 'Sato', 'Ruiz', 'Price', 'Haddad', 'Kovač'];

function makeFields(count: number): Field[] {
  return Array.from({ length: count }, (_, i) => ({
    id: `m${i}`,
    name: `${first[i % 8]} ${last[(i * 3) % 8]}`,
    title: titles[i % 4]!,
    phone: `+386 1 ${String(4000 + i).padStart(4, '0')} ${String(10 + (i % 90))}`,
    office: offices[i % 4]!,
  }));
}

const columns: DataGridColumn<Field>[] = [
  { id: 'name', header: 'Name', accessor: 'name', width: 180 },
  { id: 'title', header: 'Job title', accessor: 'title', editable: true, width: 200 },
  { id: 'phone', header: 'Phone', accessor: 'phone', editable: true, width: 170 },
  { id: 'office', header: 'Office', accessor: 'office', editable: true, width: 140 },
];

export function PinnedColumn() {
  const wide: DataGridColumn<Field>[] = [
    ...columns,
    {
      id: 'email',
      header: 'Email',
      accessor: (r) => `${r.name.toLowerCase().replace(/\s+/g, '.')}@binds.si`,
      width: 260,
    },
    { id: 'template', header: 'Template', accessor: () => 'Standard signature', width: 200 },
  ];
  return (
    <div style={{ maxWidth: 560 }}>
      <DataGrid
        aria-label="Mailboxes"
        columns={wide}
        data={makeFields(30)}
        getRowId={(r) => r.id}
        height={280}
        pinFirstColumn
      />
    </div>
  );
}