@yeonpm/table

Canvas 기반 고성능 React 데이터 테이블 라이브러리입니다.
High-performance React data table with canvas virtualization.

| | | |---|---| | Docs | yeonpm-table.vercel.app | | 한국어 / English | 헤더에서 언어 전환 · Language toggle in the header | | Package | @yeonpm/table | | Repo | github.com/yeonpm/yeonpm-table | | Docs UI | Built with @yeonpm/docs-template |

Features / 기능

• Canvas 3-pane virtualization (3000+ rows)
• Column pin / resize / drag reorder
• Header filters, sorting, quick search
• Cell select / edit / copy / keyboard navigation
• Row selection, pagination, column settings
• Domain-free core — extend via ports / slots / TableProvider
• Typed config: TableConfigInterface, FieldDataInterface

Install

npm install @yeonpm/table

Peer dependencies:

npm install react react-dom @emotion/react @emotion/styled

Static icons

Icons resolve via getAssetUrl() → /image/... by default.
Package ships public/image (also dist/image after build). Options:

1. Copy node_modules/@yeonpm/table/public/image → app public/image (Vite/Next), or
2. Call setTableAssetBase('/path-to-assets') / set globalThis.__YEONPM_TABLE_ASSET_BASE__

Quick Start

import { DataTable, useDataTable, TableProvider } from '@yeonpm/table';

function MyList() {
  const table = useDataTable({
    initialValues: {
      fieldData: columnsFromServer,
      tableConfig: {
        filterable: true,
        searchable: true,
        pagingEnable: true,
        refreshEnable: true,
        colSetEnable: true,
      },
    },
    ports: {
      scopeId: 'my-list',
      persistColumns: async (fields) => { /* POST */ },
      downloadExcel: async (query) => { /* download */ },
      onCellAction: (payload) => { /* LINK / FEATURE */ },
    },
  });

  // fetch → table.setData / setTotalRows / setTotalPages

  return (
    <TableProvider>
      <DataTable {...table} scopeId="my-list" locale="ko" />
    </TableProvider>
  );
}

Server config merge (ERP pattern)

// layout API
table.setTableConfig({ ...serverLayout });
table.setPageSize(serverLayout.pageSize);

// list API
table.setData(rows);
table.setTotalRows(total);

See examples/erp-adapter.ts for a fuller adapter sketch.

Public API

| Export | Description | |--------|-------------| | DataTable / DataTableProps | Table UI | | useDataTable / UseDataTableReturn | Headless state hook | | TableProvider / useTableOverlays | Popup/toast injection | | Pagination | Standalone pagination | | TableConfigInterface / FieldDataInterface | Config types | | DataTablePorts | persistColumns, downloadExcel, cellRenderers, onCellAction, scopeId | | getAssetUrl / setTableAssetBase | Icon URL helper | | mergeFieldDataFromConfig / toTablePageIndex | Utilities |

Docs site (KO / EN)

npm install
npm run dev    # http://localhost:3010
npm run test
npm run build

License

MIT