<bmx-data-grid>

<div class="row" role="group" aria-label="Example actions">
  <bmx-button id="ex-dg-group" variant="soft">Group by team</bmx-button>
  <bmx-button id="ex-dg-changes" variant="soft">Show changes</bmx-button>
  <bmx-button id="ex-dg-pivot" toggle variant="soft">Pivot by team</bmx-button>
  <bmx-button id="ex-dg-csv" variant="ghost">Export CSV</bmx-button>
</div>

<bmx-data-grid id="ex-dg" label="People" checkboxes style="--bmx-data-grid-height: 26rem; margin-block-start: 1rem"></bmx-data-grid>

<div class="row" style="margin-block-start: 1rem">
  <span class="note" id="ex-dg-out">
    <strong>Everything is live.</strong> Click a heading to sort, drag it to the group bar, type in the search,
    double-click or start typing to edit a cell (salaries cannot go below zero), and press <kbd>Ctrl</kbd>+<kbd>Z</kbd>
    to undo. Choose rows with the boxes, open a row with its expander, and right-click a cell for its commands.
  </span>
</div>

<script type="module">
  await customElements.whenDefined('bmx-data-grid');

  const grid = document.getElementById('ex-dg');
  const out = document.getElementById('ex-dg-out');

  // Columns are plain data: a field, a type and a few options.
  grid.columns = [
    { field: 'name', type: 'person', subtitleField: 'role', width: 220, pinned: 'start' },
    { field: 'team', type: 'select', options: ['Platform', 'Payments', 'Mobile', 'Data'] },
    { field: 'status', type: 'status' },
    { field: 'salary', type: 'currency', currency: 'GBP', min: 0, aggregate: 'sum' },
    { field: 'started', type: 'date' },
    { field: 'progress', type: 'progress', title: 'Goals' },
    { field: 'rating', type: 'rating' },
    { field: 'remote', type: 'toggle' },
  ];

  const names = ['Ada Lovelace', 'Grace Hopper', 'Alan Turing', 'Katherine Johnson', 'Margaret Hamilton', 'Barbara Liskov', 'Radia Perlman', 'Sophie Wilson'];
  const teams = ['Platform', 'Payments', 'Mobile', 'Data'];
  grid.rows = Array.from({ length: 200 }, (_, i) => ({
    id: i + 1,
    name: names[i % names.length],
    role: ['Architect', 'Analyst', 'Engineer', 'Lead'][i % 4],
    team: teams[i % 4],
    status: ['Active', 'On leave', 'Active', 'Pending'][i % 4],
    salary: 42000 + ((i * 7919) % 60000),
    started: `20${String(15 + (i % 11)).padStart(2, '0')}-0${(i % 9) + 1}-15`,
    progress: (i * 37) % 101,
    rating: (i % 5) + 1,
    remote: i % 3 === 0,
  }));

  document.getElementById('ex-dg-group').addEventListener('click', () => grid.setGroupBy(['team']));
  document.getElementById('ex-dg-changes').addEventListener('click', async () => {
    const { added, updated, removed } = await grid.getChanges();
    out.textContent = `getChanges() - ${added.length} added, ${updated.length} changed, ${removed.length} removed`;
  });
  document.getElementById('ex-dg-csv').addEventListener('click', () => grid.download('csv'));
  document.getElementById('ex-dg-pivot').addEventListener('bmxActivate', event =>
    grid.setPivot(event.detail.pressed ? { rows: ['team'], columns: ['status'], values: [{ field: 'salary', aggregate: 'avg' }] } : null),
  );

  // Rules as data: the filters' own tests, so they can be kept on a server.
  grid.formatRules = [{ field: 'salary', when: { op: 'gte', value: 95000 }, style: { tone: 'success', bold: true } }];

  // A panel under each row, opened with its expander.
  grid.detailRenderer = (row, panel) => {
    panel.style.padding = '0.75rem 1rem';
    return `${row.name} has been in ${row.team} since ${row.started}, working ${row.remote ? 'remotely' : 'from the office'}.`;
  };
  grid.detailHeight = 90;

  // Events: the data changed, and which rows are chosen.
  grid.addEventListener('bmxGridDataChange', event => {
    const cell = event.detail.cells[0];
    if (cell) out.textContent = `bmxGridDataChange - ${cell.field}: ${JSON.stringify(cell.oldValue)} -> ${JSON.stringify(cell.value)}`;
  });
  grid.addEventListener('bmxGridSelectionChange', event => {
    out.textContent = `bmxGridSelectionChange - ${event.detail.count} rows chosen`;
  });

  // Rows from a server instead: grid.dataProvider = async ({ start, count, sort, filters, search }) => ({ rows, total });
</script>

<div class="row" role="group" aria-label="Spreadsheet example actions" style="margin-block-start: 2rem">
  <strong>Spreadsheet mode</strong>
  <bmx-button id="ex-dg-xlsx" variant="ghost">Export to Excel</bmx-button>
</div>

<bmx-formula-bar id="ex-dg-bar" engine="ex-dg-sheet" label="Formula for the active cell" style="margin-block-start: 0.75rem"></bmx-formula-bar>
<bmx-data-grid id="ex-dg-sheet" spreadsheet group-panel="false" label="Quote" sheet-name="Quote" style="--bmx-data-grid-height: 24rem; margin-block-start: 0.5rem"></bmx-data-grid>

<div class="row" style="margin-block-start: 1rem">
  <span class="note">
    <strong>A worksheet in a grid.</strong> Columns have letters and rows numbers (the titles are row 1). Type
    <code>=</code> in any cell for a formula, then click or drag over cells to put their references in - each is
    outlined in its colour - or edit the active cell in the formula bar above. <em>Amount</em> is a formula column
    (<code>=[@Price]*[@Qty]*(1-[@Discount])</code>); the totals, sorting and the Excel export use the values, and the
    export keeps the formulas.
  </span>
</div>

<script type="module">
  await customElements.whenDefined('bmx-data-grid');
  const sheet = document.getElementById('ex-dg-sheet');

  sheet.columns = [
    { field: 'item', title: 'Item', width: 200 },
    { field: 'price', title: 'Price', type: 'currency', currency: 'GBP' },
    { field: 'qty', title: 'Qty', type: 'integer', aggregate: 'sum' },
    { field: 'discount', title: 'Discount', type: 'percent', width: 130 },
    { field: 'amount', title: 'Amount', type: 'currency', currency: 'GBP', aggregate: 'sum', formula: '=[@Price]*[@Qty]*(1-[@Discount])' },
  ];
  // Formulas typed into cells live in the rows, as text starting with `=`.
  sheet.rows = [
    { item: 'Standing desk', price: 420, qty: 6, discount: '=IF(C2>=5, 10%, 0)' },
    { item: 'Monitor arm', price: 85, qty: 12, discount: '=IF(C3>=10, 15%, 0)' },
    { item: 'Task chair', price: 310, qty: 6, discount: '=D2' },
    { item: 'Cable tray', price: 24, qty: '=C2+C4', discount: 0 },
    { item: 'Delivery', price: '=ROUNDUP(SUM(B2:B5)*2%, -1)', qty: 1, discount: 0 },
  ];

  document.getElementById('ex-dg-xlsx').addEventListener('click', () => sheet.download('xlsx'));
</script>