쉬운 반응 테이블

뭐?

간단한 배터리에는 React 프로젝트용 테이블 구성 요소가 포함되어 있습니다.

ez-react-table에게 인사하세요!

⚡️ Demo을 사용해 보세요! ⚡️

왜요?

나는 많은 관리자 관련 대시보드를 만들고 제대로 작동하는 테이블을 원했습니다. 설정이 거의 없고 사용자 경험이 좋은 테이블.

어떻게?

기본적으로 필터링, 정렬, 가상화된 행, 무한 스크롤 기능, 효과적인 스타일 지정(다크 모드 포함) 및 도구 설명이 포함된 스위트 셀 오버플로 처리를 위한 검색 표시줄이 제공됩니다. 또한 행 셀에 사용자 정의 구성 요소를 추가하는 것은 임의적입니다.

설정

npm i ez-react-table

예시

import * as React from "react";
import EzReactTable from "ez-react-table";

// fake data
const data = Array.from(Array(20))
  .map((i) => [
    { first: "Michael", last: "Myers" },
    { first: "Laurie", last: "Strode" },
    { first: "Samuel", last: "Loomis" },
  ])
  .reduce((a, c) => [...a, ...c], []);

// define columns
const cols = [
  {
    title: "First",
    width: 200,
    key: "first",
  },
  {
    title: "Last",
    width: 200,
    key: "last",
  },
  {
    title: "Actions",
    width: 100,
    key: "action",
    center: true,
    render: (value, object) => (
      <button onClick={() => alert(JSON.stringify(object))}>View</button>
    ),
  },
];

function App() {
  return (
    <div className="App">
      <EzReactTable cols={cols} data={data} />
    </div>
  );
}

끝

읽어 주셔서 감사합니다. 프로젝트 전반에 걸쳐 사용하면서 활발하게 개발 중입니다. 계속 지켜봐 주세요!

평화.