빠른 시작

comins-table@0.2.2

설치와 스타일

npm install comins-table@0.2.2 react@19.3.0 react-dom@19.3.0

import 'comins-table/styles.css';

CominsTable의 React row 입력은 data 하나로 통일합니다. 내부 copy/paste, row 이동, cell 편집성 동작으로 데이터 배열이 바뀌면 onChangeData로 다음 배열을 받습니다.

import { CominsTable } from "comins-table";
import { useState } from "react";

type Row = { id: string; name: string; role: string };

export function QuickStart() {
  const [data, setData] = useState<Row[]>([{ id: "a", name: "Alpha", role: "Owner" }]);

  return (
    <CominsTable<Row>
      columns={[
        { field: "name", label: "Name", sort: true },
        { field: "role", label: "Role" },
      ]}
      data={data}
      getRowId={(row) => row.id}
      onChangeData={setData}
      onClickCell={({ row, column, value }) => console.log(row.index, column.id, value)}
    />
  );
}

기본 column schema는 field, label, id, sort, props, format, header입니다. id가 없으면 field가 column id가 됩니다.

Comins Table은 client-only component이며 현재 server rendering을 지원하지 않습니다.

---

실행 가능한 대표 예제 · 배포 기준 원본 가이드