import TableCrafter from 'tablecrafter';

const table = new TableCrafter('#my-table', {
  data: '/api/employees',
  columns: [{ field: 'name', label: 'Name', editable: true }],
  editable: true,
});
table.render();

import TableCrafter from 'tablecrafter';
import 'tablecrafter/dist/tablecrafter.css';

{
  field: 'email',       // data key (required)
  label: 'Email',       // header text
  type: 'email',        // cell renderer: text|badge|link|progress|sparkline|...
  editable: true,       // enable this column for editing
  sortable: true,
  filterable: true,
  formula: 'price * qty', // computed column expression
  aggregate: 'sum',     // sum | count | avg | min | max | distinct
  cellType: 'heatmap',  // built-in cell type override
  lookup: {
    url: '/api/users',
    valueField: 'id',
    labelField: 'name',
  },
}

const table = new TableCrafter('#table', {
  data: rows,
  columns: [
    { field: 'email', label: 'Email', editable: true },
    { field: 'age',   label: 'Age',   editable: true },
  ],
  validation: {
    rules: {
      email: [{ type: 'required' }, { type: 'email' }],
      age:   [{ type: 'min', value: 18 }, { type: 'max', value: 120 }],
    },
  },
  onEdit({ row, field, value }) {
    console.log(`${field} changed to`, value);
  },
});
table.render();

const table = new TableCrafter('#table', {
  data: rows,
  columns,
  permissions: {
    enabled: true,
    edit:   ['admin', 'manager'],
    delete: ['admin'],
    ownOnly: true,   // users see only rows they own
  },
});

table.setCurrentUser({ id: 42, roles: ['manager'], username: 'alice' });
table.render();

const table = new TableCrafter('#table', {
  data: rows,
  columns: [
    { field: 'name',   label: 'Name',   editable: true },
    { field: 'salary', label: 'Salary', editable: true, editableRoles: ['admin'] },
  ],
  roles: ['viewer'],            // or call table.setCurrentUser({ roles: [...] })
  showPermissionTooltip: true,  // tooltip on restricted cells
});

const table = new TableCrafter('#table', {
  data: rows,
  columns,
  i18n: {
    locale: 'ar',           // Arabic -- triggers RTL layout automatically
    fallbackLocale: 'en',
    messages: {
      ar: { 'search.placeholder': 'ابحث...' },
    },
  },
});

i18n: {
  locale: 'de',
  formats: {
    // Intl.NumberFormat options object, or a function(value, locale) => string
    formatNumber: { style: 'currency', currency: 'EUR' },
    // Function(value, locale) => string
    formatDate: (value, locale) =>
      new Intl.DateTimeFormat(locale, { dateStyle: 'medium' }).format(new Date(value)),
  },
},

table.setLocale('fr');

// Register or override message keys for any locale
table.addMessages('es', { 'toolbar.search': 'Buscar...' });

const myPlugin = {
  name: 'my-plugin',
  install(table, opts) {
    // extend or monkey-patch `table` here
    console.log('installed with', opts);
  },
};

const table = new TableCrafter('#table', {
  data: rows,
  columns,
  plugins: [[myPlugin, { debug: true }]],
});

const guardPlugin = {
  name: 'guard',
  hooks: {
    beforeEdit: ({ field, value }) => {
      if (field === 'salary' && value < 0) return false; // cancel
    },
    afterEdit: ({ field, oldValue, newValue }) => {
      console.log(`${field}: ${oldValue} -> ${newValue}`);
    },
    destroy: () => console.log('teardown'),
  },
};

// Persistent subscription
const unsub = table.on('cellEdit', ({ row, field, oldValue, newValue }) => {
  console.log(`Row ${row}: ${field} changed from ${oldValue} to ${newValue}`);
});

// One-shot subscription (auto-removes after the first firing)
table.once('rowAdd', ({ row, index }) => {
  console.log('First row added at index', index, ':', row);
});

// Unsubscribe via the returned function
unsub();

// Or by reference
const handler = ({ page }) => console.log('page', page);
table.on('pageChange', handler);
table.off('pageChange', handler);

import { useEffect, useRef } from 'react';
import TableCrafter from 'tablecrafter';

export function DataTable({ data, onEdit }) {
  const ref = useRef(null);
  useEffect(() => {
    const table = new TableCrafter(ref.current, { data, onEdit, columns: [] });
    table.render();
    return () => table.destroy();
  }, [data]);
  return <div ref={ref} />;
}

table.downloadCSV();           // triggers browser download
const json = table.exportToJSON();