@xeplr/ui-table 1.0.0 → 1.0.1

package/README.md

@@ -0,0 +1,151 @@
+# @xeplr/ui-table
+
+Schema-driven React data table. Sort, filter, paginate, edit, nested children, transactional commits, config-driven cell renderers. Gold-on-dark theme.
+
+(The package name on npm is `@xeplr/ui-table` — the GitHub repo and folder are named `xeplr-ui-table`.)
+
+## Install
+
+```sh
+npm i @xeplr/ui-table
+```
+
+Peer dep: `react ^18 || ^19`.
+
+## Quick start
+
+```jsx
+import { XeplrTable } from '@xeplr/ui-table';
+
+<XeplrTable
+  data={projects}
+  schema={{ 0: { key: 'projects', columns: [
+    { accessor: 'name',    header: 'Project', render: { type: 'twoLine', subKey: 'subtitle' } },
+    { accessor: 'client',  header: 'Client',  render: { type: 'avatarName', subKey: 'clientType' } },
+    { accessor: 'tags',    header: 'Tags',    render: { type: 'tags' } },
+    { accessor: 'budget',  header: 'Budget',  render: { type: 'currency', currency: 'INR' } },
+    { accessor: 'members', header: 'Team',    render: { type: 'memberChips', max: 3 } }
+  ]}}}
+  onCommit={async (changeSet) => api.save(changeSet)}
+/>
+```
+
+Filters, sort, pagination, type detection are all automatic.
+
+## Column config
+
+Each column object:
+
+| field | type | notes |
+|---|---|---|
+| `accessor` | string | required — row property |
+| `header` | string | column title |
+| `dataType` | `'string'\|'number'\|'date'\|'boolean'` | optional — auto-detected from data |
+| `render` | `{ type, ...config }` or string | declarative cell — see renderers |
+| `cell` | `(ctx) => ReactNode` | escape hatch — custom JSX (overrides `render`) |
+| `cellStyle` | array | conditional styles — `[{ when: '$.status is active', backgroundColor, color }]` |
+| `enableSorting` | boolean | default true |
+| `enableColumnFilter` | boolean | default true |
+
+## Renderers
+
+Pass via `render: { type: 'X', ...config }`. String shorthand `render: 'X'` works for renderers with no config.
+
+| type | config | value shape | output |
+|---|---|---|---|
+| `avatarName` | `{ subKey?, size? }` | string | avatar+bold name [+ subtitle from `row[subKey]`] |
+| `twoLine` | `{ subKey? }` | string | primary line [+ subtitle from `row[subKey]`] |
+| `tags` | `{ variant?: 'gold'\|'muted'\|'blue', max? }` | `string[]` or comma-string | pill list, `+N` overflow |
+| `currency` | `{ currency?: 'INR', position?: 'before', decimals?: 0, bold? }` | number | symbol + formatted number |
+| `memberChips` | `{ max?: 3, nameKey?: 'name' }` | `Array<{name,...}>` | avatar+name chips, `+N` overflow |
+| `statusBadge` | `{ map: { value: { bg, color, label? } }, default? }` | string | colored pill |
+| `dateDisplay` | `{ format?: 'date'\|'datetime'\|'relative' }` | Date or ISO string | formatted date |
+| `link` | `{ onClick?(row), hrefKey?, target? }` | string | clickable text or `<a>` |
+
+Add your own: drop a file in `src/renderers/<name>.jsx` exporting `default function (config) { return cell; }`, register it in `renderers/index.js`. Or import the registry and extend at runtime: `import { renderers } from '@xeplr/ui-table'`.
+
+## Conditional cell styling
+
+```js
+{ accessor: 'status', cellStyle: [
+  { when: '$.status is active',   backgroundColor: '#1b5e20', color: '#a5d6a7' },
+  { when: '$.budget < 100000',    backgroundColor: '#bf360c', color: '#ffab91' }
+]}
+```
+
+Operators: `is`, `is not`, `>`, `<`, `>=`, `<=`, `contains`, `starts with`, `ends with`, `is empty`, `is not empty`. See `operators.js`.
+
+## Nested data (schema levels)
+
+```js
+schema = {
+  0: { key: 'teams',     columns: [...] },          // root
+  1: { key: 'employees', columns: [...] },          // children of each row
+  2: { key: 'tasks',     columns: [...] }           // grandchildren
+}
+```
+
+Each row at level N must have `row[schema[N+1].key]` as an array.
+
+`childDisplay` prop:
+- `'popup'` (default) — double-click row → modal with children
+- `'inner'` — expand arrow inline
+
+## Edit / add / delete / commit
+
+Pass `onCommit={async (changeSet) => ...}`. Toolbar gets **+ Add New**, row checkboxes get **Delete Selected**, double-click → edit modal. Edits stage locally; **Commit** flushes a deep diff:
+
+```js
+[
+  { op: 'add',    path: ['teams', null], record: {...} },
+  { op: 'update', path: ['teams', '3'], record: {...}, changes: { status: 'inactive' } },
+  { op: 'delete', path: ['teams', '5', 'employees', 'e7'] }
+]
+```
+
+`buildChangeSet(originalData, stagedData, schema)` is exported if you want to compute diffs yourself.
+
+## Props (XeplrTable)
+
+| prop | type | default |
+|---|---|---|
+| `data` | `Array<object>` | required |
+| `schema` | `{ 0: { key, columns }, 1?, 2?, ... }` | required |
+| `childDisplay` | `'popup'\|'inner'` | `'popup'` |
+| `pageSize` | number | 20 |
+| `enableSorting` | boolean | true |
+| `enableFiltering` | boolean | true |
+| `enablePagination` | boolean | true |
+| `onCommit` | `async (changeSet) => void` | — (omit to make table read-only) |
+| `className` | string | — |
+
+## Theme
+
+Gold-on-dark by default. Override in your stylesheet — every chrome rule and renderer class is namespaced `.xeplr-table-*` / `.xeplr-r-*`. The override block at the bottom of `xeplr-table.css` is the canonical theme definition.
+
+## Files
+
+```
+src/
+  XeplrTable.jsx              ─ main component
+  useTableController.js       ─ TanStack wiring + renderer dispatch
+  useActionsController.js     ─ add/edit/delete staging + commit
+  detectTypes.js              ─ infers column dataType from rows
+  resolveCellStyle.js         ─ evaluates `cellStyle` rules
+  operators.js                ─ shared comparison logic
+  buildChangeSet.js           ─ deep-diff for transactional commits
+  xeplr-table.css             ─ chrome + renderer styles + theme
+
+  filters/
+    StringFilter.jsx · NumberFilter.jsx · DateFilter.jsx · BooleanFilter.jsx · FilterWrapper.jsx
+  actions/
+    ActionsCell.jsx · RecordModal.jsx · RecordDetail.jsx · ChildTable.jsx
+  renderers/
+    avatarName.jsx · twoLine.jsx · tags.jsx · currency.jsx
+    memberChips.jsx · statusBadge.jsx · dateDisplay.jsx · link.jsx
+    _helpers.js · index.js
+```
+
+## Exports
+
+`XeplrTable`, `useTableController`, `useActionsController`, `TYPES`, `detectTypes`, `buildChangeSet`, `resolveCellStyle`, `resolveOperator`, `CHILD_DISPLAY`, individual filter components, action components, `renderers` registry + each renderer factory.

package/package.json

@@ -1,15 +1,28 @@
 {
   "name": "@xeplr/ui-table",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Controlled TanStack Table wrapper with auto-detected column types and smart filters",
   "type": "module",
   "main": "src/index.js",
-  "files": ["src/"],
-  "keywords": ["table", "tanstack", "react", "filters", "datagrid"],
+  "files": [
+    "src/"
+  ],
+  "keywords": [
+    "table",
+    "tanstack",
+    "react",
+    "filters",
+    "datagrid"
+  ],
   "author": "xeplr",
   "license": "MIT",
-  "repository": { "type": "git", "url": "https://github.com/Xeplr/xeplr-ui-table" },
-  "publishConfig": { "access": "public" },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Xeplr/xeplr-ui-table"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
     "@tanstack/react-table": "^8.0.0"

package/src/XeplrTable.jsx

@@ -41,6 +41,11 @@ var CHILD_DISPLAY = { POPUP: 'popup', INNER: 'inner' };
  * @param {boolean}        [props.enablePagination] - Default: true
  * @param {string}         [props.className]        - Additional CSS class
  * @param {Function}       [props.onCommit]         - async (changeSet[]) => void
+ * @param {Array<{key: string, label: string, icon?: any, onClick: (row) => void,
+ *   visible?: (row) => boolean, disabled?: (row) => boolean, variant?: string}>} [props.rowActions]
+ *   - Custom per-row action buttons (e.g. Rollback, Delete), replacing the built-in
+ *     view/copy/edit/delete set. Fires immediately via each action's onClick — works
+ *     standalone, without onCommit.
  */
 export default function XeplrTable(props) {
   var schema = props.schema || {};
@@ -85,10 +90,12 @@ export default function XeplrTable(props) {
   // Show expand column only in inner mode
   var showExpandCol = hasChildren && useInner;
 
+  var hasRowActions = actions.hasActions || !!(props.rowActions && props.rowActions.length > 0);
+
   var totalColumns = headerGroups[0]?.headers.length || 1;
   if (showExpandCol) totalColumns++;
   if (actions.hasDelete) totalColumns++;
-  if (actions.hasActions) totalColumns++;
+  if (hasRowActions) totalColumns++;
 
   // Resolve modal schema columns for form hints
   var modalSchemaColumns = columns;
@@ -187,7 +194,7 @@ export default function XeplrTable(props) {
                       </th>
                     );
                   })}
-                  {actions.hasActions && (
+                  {hasRowActions && (
                     <th className="xeplr-table-th xeplr-table-th-actions">
                       <div className="xeplr-table-header-cell">
                         <span className="xeplr-table-header-label">Actions</span>
@@ -247,9 +254,10 @@ export default function XeplrTable(props) {
                       </td>
                     );
                   })}
-                  {actions.hasActions && (
+                  {hasRowActions && (
                     <td className="xeplr-table-td xeplr-table-td-actions">
                       <ActionsCell row={original} hasSave={actions.hasSave} hasDelete={actions.hasDelete}
+                        rowActions={props.rowActions}
                         onView={function() { usePopup ? actions.openDetail(original) : actions.openView(original); }}
                         onCopy={actions.openCopy} onEdit={actions.openEdit}
                         onDelete={function() { actions.handleDeleteRow(rowId); }} />

package/src/actions/ActionsCell.jsx

@@ -2,7 +2,15 @@ import React from 'react';
 
 /**
  * Actions cell rendered in the last column of each row.
- * Shows view (always), copy, edit (if onSave), delete (if onDelete).
+ *
+ * Two modes:
+ *  - props.rowActions given: renders exactly those custom actions, firing
+ *    immediately via each action's own onClick (no staged CRUD queue).
+ *  - otherwise: the built-in set — view (always), copy, edit (if onSave),
+ *    delete (if onDelete) — driven by the table's onCommit staged queue.
+ *
+ * @param {Array<{key: string, label: string, icon?: any, onClick: (row) => void,
+ *   visible?: (row) => boolean, disabled?: (row) => boolean, variant?: string}>} [props.rowActions]
  */
 export default function ActionsCell(props) {
   var row = props.row;
@@ -12,6 +20,33 @@ export default function ActionsCell(props) {
   var onCopy = props.onCopy;
   var onEdit = props.onEdit;
   var onDelete = props.onDelete;
+  var rowActions = props.rowActions;
+
+  if (rowActions && rowActions.length > 0) {
+    return (
+      <div className="xeplr-table-actions-cell">
+        {rowActions.map(function(action) {
+          if (action.visible && !action.visible(row)) return null;
+          var disabled = action.disabled ? action.disabled(row) : false;
+          var className = 'xeplr-table-action-btn xeplr-table-action-' + action.key
+            + (action.icon ? '' : ' xeplr-table-action-label')
+            + (action.variant ? ' xeplr-table-action-' + action.variant : '');
+          return (
+            <button
+              key={action.key}
+              type="button"
+              className={className}
+              title={action.label}
+              disabled={disabled}
+              onClick={function() { action.onClick(row); }}
+            >
+              {action.icon || action.label}
+            </button>
+          );
+        })}
+      </div>
+    );
+  }
 
   return (
     <div className="xeplr-table-actions-cell">

package/src/index.js

@@ -30,3 +30,7 @@ export { resolve as resolveOperator, resolveString, resolveNumber, resolveDate,
 
 // Conditional formatting
 export { resolveCellStyle } from './resolveCellStyle.js';
+
+// Cell renderers (config-driven)
+export { default as renderers } from './renderers/index.js';
+export { avatarName, tags, currency, memberChips, twoLine, statusBadge, dateDisplay, link } from './renderers/index.js';

package/src/renderers/_helpers.js

@@ -0,0 +1,43 @@
+export function initials(name) {
+  if (!name) return '·';
+  var parts = String(name).trim().split(/\s+/).slice(0, 2);
+  return parts.map(function(p) { return p.charAt(0).toUpperCase(); }).join('');
+}
+
+// Stable color per name — used by avatar tints.
+var PALETTE = [
+  ['#d4af37', '#8a6f1f'],
+  ['#5b8def', '#2d4f99'],
+  ['#4ade80', '#1d7a3f'],
+  ['#ef5b5b', '#a02020'],
+  ['#a78bfa', '#5e3fa3'],
+  ['#f97316', '#a23f0a'],
+  ['#22d3ee', '#0d6e80'],
+  ['#fb7185', '#9b1c33']
+];
+
+export function avatarTint(seed) {
+  var s = String(seed || '');
+  var hash = 0;
+  for (var i = 0; i < s.length; i++) hash = (hash * 31 + s.charCodeAt(i)) | 0;
+  var pair = PALETTE[Math.abs(hash) % PALETTE.length];
+  return 'linear-gradient(135deg, ' + pair[0] + ' 0%, ' + pair[1] + ' 100%)';
+}
+
+var CURRENCY_SYMBOLS = {
+  INR: '₹', USD: '$', EUR: '€', GBP: '£', JPY: '¥', AUD: 'A$', CAD: 'C$', SGD: 'S$', AED: 'د.إ'
+};
+
+export function currencySymbol(code) {
+  return CURRENCY_SYMBOLS[code] || code || '';
+}
+
+export function formatNumber(value, decimals) {
+  if (value === null || value === undefined || value === '') return '';
+  var n = Number(value);
+  if (!isFinite(n)) return '';
+  if (typeof decimals === 'number') {
+    return n.toLocaleString(undefined, { minimumFractionDigits: decimals, maximumFractionDigits: decimals });
+  }
+  return n.toLocaleString();
+}

package/src/renderers/avatarName.jsx

@@ -0,0 +1,31 @@
+import { initials, avatarTint } from './_helpers.js';
+
+/**
+ * config: { subKey?: string, size?: 'sm'|'md', imgKey?: string, imgPrefix?: string }
+ *
+ * If `imgKey` is set and the row has a value for that key, render an <img>;
+ * otherwise fall back to colored initials. `imgPrefix` is prepended to the
+ * value so callers can pass relative filenames and a base URL once.
+ */
+export default function avatarName(config) {
+  var subKey = config && config.subKey;
+  var size = (config && config.size) || 'md';
+  var imgKey = config && config.imgKey;
+  var imgPrefix = (config && config.imgPrefix) || '';
+  return function cell(ctx) {
+    var name = ctx.getValue();
+    var sub = subKey ? ctx.row.original[subKey] : null;
+    var img = imgKey ? ctx.row.original[imgKey] : null;
+    return (
+      <div className={'xeplr-r-avatarname xeplr-r-avatarname-' + size}>
+        {img
+          ? <img className="xeplr-r-avatar xeplr-r-avatar-img" src={imgPrefix + img} alt="" />
+          : <div className="xeplr-r-avatar" style={{ background: avatarTint(name) }}>{initials(name)}</div>}
+        <div className="xeplr-r-avatarname-text">
+          <div className="xeplr-r-avatarname-name">{name}</div>
+          {sub && <div className="xeplr-r-avatarname-sub">{sub}</div>}
+        </div>
+      </div>
+    );
+  };
+}

package/src/renderers/currency.jsx

@@ -0,0 +1,25 @@
+import { currencySymbol, formatNumber } from './_helpers.js';
+
+/**
+ * config: { currency?: 'INR'|'USD'|..., position?: 'before'|'after', decimals?: number, bold?: boolean }
+ */
+export default function currency(config) {
+  var code = (config && config.currency) || 'INR';
+  var position = (config && config.position) || 'before';
+  var decimals = config && typeof config.decimals === 'number' ? config.decimals : 0;
+  var bold = config && config.bold !== false;
+  var symbol = currencySymbol(code);
+  return function cell(ctx) {
+    var v = ctx.getValue();
+    if (v === null || v === undefined || v === '') return null;
+    var formatted = formatNumber(v, decimals);
+    var className = 'xeplr-r-currency' + (bold ? ' xeplr-r-currency-bold' : '');
+    return (
+      <span className={className}>
+        {position === 'before' && <span className="xeplr-r-currency-sym">{symbol}</span>}
+        <span className="xeplr-r-currency-value">{formatted}</span>
+        {position === 'after' && <span className="xeplr-r-currency-sym xeplr-r-currency-sym-after">{symbol}</span>}
+      </span>
+    );
+  };
+}

package/src/renderers/dateDisplay.jsx

@@ -0,0 +1,38 @@
+/**
+ * config: { format?: 'date'|'datetime'|'relative' }
+ */
+function pad(n) { return n < 10 ? '0' + n : '' + n; }
+var MONTHS = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
+
+function fmtDate(d) {
+  return pad(d.getDate()) + ' ' + MONTHS[d.getMonth()] + ' ' + d.getFullYear();
+}
+
+function fmtDateTime(d) {
+  return fmtDate(d) + ' ' + pad(d.getHours()) + ':' + pad(d.getMinutes());
+}
+
+function fmtRelative(d, now) {
+  var diff = (now - d) / 1000;
+  var abs = Math.abs(diff);
+  if (abs < 60) return 'just now';
+  if (abs < 3600) return Math.round(abs / 60) + 'm ' + (diff > 0 ? 'ago' : 'from now');
+  if (abs < 86400) return Math.round(abs / 3600) + 'h ' + (diff > 0 ? 'ago' : 'from now');
+  if (abs < 86400 * 30) return Math.round(abs / 86400) + 'd ' + (diff > 0 ? 'ago' : 'from now');
+  return fmtDate(d);
+}
+
+export default function dateDisplay(config) {
+  var format = (config && config.format) || 'date';
+  return function cell(ctx) {
+    var v = ctx.getValue();
+    if (!v) return null;
+    var d = v instanceof Date ? v : new Date(v);
+    if (isNaN(d.getTime())) return null;
+    var out;
+    if (format === 'datetime') out = fmtDateTime(d);
+    else if (format === 'relative') out = fmtRelative(d, new Date());
+    else out = fmtDate(d);
+    return <span className="xeplr-r-date">{out}</span>;
+  };
+}

package/src/renderers/index.js

@@ -0,0 +1,22 @@
+import avatarName from './avatarName.jsx';
+import tags from './tags.jsx';
+import currency from './currency.jsx';
+import memberChips from './memberChips.jsx';
+import twoLine from './twoLine.jsx';
+import statusBadge from './statusBadge.jsx';
+import dateDisplay from './dateDisplay.jsx';
+import link from './link.jsx';
+
+var renderers = {
+  avatarName: avatarName,
+  tags: tags,
+  currency: currency,
+  memberChips: memberChips,
+  twoLine: twoLine,
+  statusBadge: statusBadge,
+  dateDisplay: dateDisplay,
+  link: link
+};
+
+export default renderers;
+export { avatarName, tags, currency, memberChips, twoLine, statusBadge, dateDisplay, link };

package/src/renderers/link.jsx

@@ -0,0 +1,24 @@
+/**
+ * config: { onClick?: (row) => void, hrefKey?: string, target?: string }
+ *
+ * If `hrefKey` is set, renders an <a>. Otherwise a clickable span that calls onClick(row).
+ */
+export default function link(config) {
+  var onClick = config && config.onClick;
+  var hrefKey = config && config.hrefKey;
+  var target = config && config.target;
+  return function cell(ctx) {
+    var label = ctx.getValue();
+    if (label === null || label === undefined || label === '') return null;
+    if (hrefKey) {
+      var href = ctx.row.original[hrefKey];
+      return <a className="xeplr-r-link" href={href} target={target}>{label}</a>;
+    }
+    return (
+      <span
+        className="xeplr-r-link"
+        onClick={function() { if (onClick) onClick(ctx.row.original); }}
+      >{label}</span>
+    );
+  };
+}

package/src/renderers/memberChips.jsx

@@ -0,0 +1,35 @@
+import { initials, avatarTint } from './_helpers.js';
+
+/**
+ * config: { max?: number, nameKey?: string, imgKey?: string, imgPrefix?: string }
+ * Value: Array<{ [nameKey]: string, [imgKey]?: string, ... }>
+ */
+export default function memberChips(config) {
+  var max = (config && config.max) || 3;
+  var nameKey = (config && config.nameKey) || 'name';
+  var imgKey = config && config.imgKey;
+  var imgPrefix = (config && config.imgPrefix) || '';
+  return function cell(ctx) {
+    var value = ctx.getValue();
+    if (!Array.isArray(value) || value.length === 0) return null;
+    var visible = value.slice(0, max);
+    var overflow = Math.max(value.length - max, 0);
+    return (
+      <div className="xeplr-r-chips">
+        {visible.map(function(item, i) {
+          var name = item && item[nameKey] ? item[nameKey] : '';
+          var img = imgKey && item ? item[imgKey] : null;
+          return (
+            <span key={i} className="xeplr-r-chip">
+              {img
+                ? <img className="xeplr-r-chip-avatar xeplr-r-chip-avatar-img" src={imgPrefix + img} alt="" />
+                : <span className="xeplr-r-chip-avatar" style={{ background: avatarTint(name) }}>{initials(name)}</span>}
+              <span className="xeplr-r-chip-name">{name}</span>
+            </span>
+          );
+        })}
+        {overflow > 0 && <span className="xeplr-r-chip-more">+{overflow}</span>}
+      </div>
+    );
+  };
+}

package/src/renderers/statusBadge.jsx

@@ -0,0 +1,15 @@
+/**
+ * config: { map: { [value]: { bg?, color?, label? } }, default?: { bg?, color? } }
+ */
+export default function statusBadge(config) {
+  var map = (config && config.map) || {};
+  var fallback = (config && config.default) || { bg: '#232540', color: '#b8bbe0' };
+  return function cell(ctx) {
+    var v = ctx.getValue();
+    if (v === null || v === undefined || v === '') return null;
+    var entry = map[v] || fallback;
+    var label = entry.label || String(v);
+    var style = { background: entry.bg, color: entry.color, borderColor: entry.border || entry.bg };
+    return <span className="xeplr-r-badge" style={style}>{label}</span>;
+  };
+}

package/src/renderers/tags.jsx

@@ -0,0 +1,23 @@
+/**
+ * config: { variant?: 'gold'|'muted'|'blue', max?: number }
+ * Value: string[] (or string — split by comma)
+ */
+export default function tags(config) {
+  var variant = (config && config.variant) || 'gold';
+  var max = config && config.max;
+  return function cell(ctx) {
+    var value = ctx.getValue();
+    if (!value) return null;
+    var list = Array.isArray(value) ? value : String(value).split(',').map(function(s) { return s.trim(); }).filter(Boolean);
+    var visible = max ? list.slice(0, max) : list;
+    var overflow = max ? Math.max(list.length - max, 0) : 0;
+    return (
+      <div className="xeplr-r-tags">
+        {visible.map(function(t, i) {
+          return <span key={i} className={'xeplr-r-tag xeplr-r-tag-' + variant}>{t}</span>;
+        })}
+        {overflow > 0 && <span className="xeplr-r-tag-more">+{overflow}</span>}
+      </div>
+    );
+  };
+}

package/src/renderers/twoLine.jsx

@@ -0,0 +1,16 @@
+/**
+ * config: { subKey?: string, primaryClass?: string }
+ */
+export default function twoLine(config) {
+  var subKey = config && config.subKey;
+  return function cell(ctx) {
+    var primary = ctx.getValue();
+    var sub = subKey ? ctx.row.original[subKey] : null;
+    return (
+      <div className="xeplr-r-twoline">
+        <div className="xeplr-r-twoline-primary">{primary}</div>
+        {sub && <div className="xeplr-r-twoline-sub">{sub}</div>}
+      </div>
+    );
+  };
+}

package/src/useTableController.js

@@ -14,6 +14,7 @@ import { stringFilterFn } from './filters/StringFilter.jsx';
 import { numberFilterFn } from './filters/NumberFilter.jsx';
 import { dateFilterFn } from './filters/DateFilter.jsx';
 import { booleanFilterFn } from './filters/BooleanFilter.jsx';
+import renderers from './renderers/index.js';
 
 var filterFnMap = {
   [TYPES.STRING]: stringFilterFn,
@@ -82,7 +83,17 @@ export default function useTableController(options) {
         enableSorting: col.enableSorting !== false,
         enableColumnFilter: col.enableColumnFilter !== false
       };
-      if (col.cell) colDef.cell = col.cell;
+      if (col.cell) {
+        colDef.cell = col.cell;
+      } else if (col.render) {
+        var rendererName = typeof col.render === 'string' ? col.render : col.render.type;
+        var rendererFn = renderers[rendererName];
+        if (!rendererFn) {
+          throw new Error('[xeplr-ui-table] Unknown renderer "' + rendererName + '". Available: ' + Object.keys(renderers).join(', '));
+        }
+        var rendererConfig = typeof col.render === 'string' ? {} : col.render;
+        colDef.cell = rendererFn(rendererConfig);
+      }
       return columnHelper.accessor(col.accessor, colDef);
     });
   }, [columns, detectedTypes]);