2021년 최적 반응 데이터 테이블 라이브러리

17079 단어 datalibraryreactlibrary

데이터 테이블은 상호작용으로 정보를 배열하는 가장 좋은 방식 중의 하나임을 효과적으로 나타낸다.수동으로 테이블을 작성하고 테이블 스타일을 설정하는 것은 더 이상 유효하지 않습니다.React에는 다양한 데이터 테이블 라이브러리가 있습니다.기존의 라이브러리는 개발자의 시간과 비용을 절약하고 작업량을 줄일 수 있다.
테이블을 사용하기 전에 Bit(Github)와 같은 클라우드 구성 요소 집선기에서 사용자 정의 테이블을 발표하고 관리해야 합니다.이것은 당신의 시간을 절약하고, 자신의 말을 되풀이해서 지루하지 않도록 보장할 것이다.
가장 유행하는 React 테이블 라이브러리를 살펴보겠습니다.

자료표


재료표는react 응용 프로그램에서 표 형식으로 데이터를 표시하는 강력한 방식이다.그것은 재료 설계 이념을 따른다.그것은 React 공간에서 가장 유행하는 소스 라이브러리 중 하나로 서로 다른 독립된 구성 요소를 제공한다.복잡성에 따라 이 구성 요소들은 처리 스타일에 사용할 수 있다.
GitHub에서 가장 많이 사용되는 React 테이블 라이브러리 중 하나로, 2천300개 이상의 별이 있다.

우세하다


• 한 줄 또는 여러 줄 기반 작업
• 기능 패키지(열 렌더링, 편집 가능, 행당 세부 정보 패널 사용자 정의)
• CSV로 내보내기
• 사용자 정의 UI 및 비헤이비어에 사용할 수 있는 여러 속성
• 대용량 파일
런타임을 보려면 터미널 창에서 React 응용 프로그램에서 다음 명령을 실행하여 라이브러리를 설치합니다.
yarn add material-table @material-ui/core 
npm install @material-ui/core
npm install material-table
다음 두 가지 방법 중 하나를 사용하여 재료 아이콘 라이브러리를 가져옵니다.
1. HTML의 스타일시트를 직접 참조합니다.
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
2. 설치 재료 아이콘:
npm install @material-ui/icons
MaterialTable라는 어셈블리를 생성합니다.js와 가져오기 재료표입니다.
import MaterialTable from "material-table";

Initialize the table data inside the function “Table” as follows.
export const Table = () => {
      const data = [
        { name: "John", email: "[email protected]", age: 12, gender: "Male" },
        { name: "Bren", email: "[email protected]", age: 24, gender: "Male" },
        { name: "Marry", email: "[email protected]", age: 18, gender: "Female" },
        { name: "Shohail", email: "[email protected]", age: 25, gender: "Male" },
        { name: "Aseka", email: "[email protected]", age: 19, gender: "Female" },
        { name: "Meuko", email: "[email protected]", age: 12, gender: "Female" },
      ];
    };
재료 데이터 테이블의 열을 다음과 같이 정의합니다.
const columns = [
        {
          title: "Name",
          field: "name",
        },
        {
          title: "Email",
          field: "email",
        },
        {
          title: "Age",
          field: "age",
        },
        {
          title: "Gender",
          field: "gender",
        },
      ];
이제 MaterialTable 태그의 열이 return 문에 바인딩됩니다. 다음과 같습니다.
return (

        <MaterialTable title="Employee Details" data={data} columns={columns} />
      );
응용 프로그램에서 MaterialTable를 정의합니다.js 파일.다음과 같이 테이블 정의와 함께 일부 옵션을 정의할 수 있습니다.
<MaterialTable
          title="Employee Details"
          data={data}
          columns={columns}
          options={{ search: true, paging: false, filtering: true, exportButton: true }}
    />
마지막으로, 표 구성 요소를 응용 프로그램에 가져옵니다.js 파일은 다음과 같습니다.
function App() {
      return (
        <div className="app">
          <div className="containers">
            <Table></Table>
          </div>
        </div>
      );
    }

RC 테이블


RC table table은 650여 개의github stars를 포함하는 또 다른 간단하고 가벼운 React table 라이브러리입니다.기존 행동의 토대 위에서 자신의 스타일을 사용하고 싶다면 이상적인 선택이다.

우세하다


• 가벼운 무게
• 열 머리글의 드롭다운 메뉴를 통해 데이터 필터링
• 여러 소스 코드 예

열세


• 파일 수 감소
먼저 해당 라이브러리를 설치합니다.
npm install rc-table
RcTable라는 어셈블리를 생성합니다.js 및 rc표 모듈 가져오기
import Table from "rc-table";
다음 그림과 같이 export 문에서 테이블의 열을 정의합니다.
export const Rctable = () => {
      const columns = [
        {
          title: "Name",
          dataIndex: "name",
          key: "name",
          width: 100,
        },
        {
          title: "Age",
          dataIndex: "age",
          key: "age",
          width: 100,
        },
        {
          title: "Email",
          dataIndex: "email",
          key: "email",
          width: 200,
        },
        {
          title: "Permanent",
          dataIndex: "permanent",
          key: "permanent",
          width:100,
        },
      ];
    };
테이블에 표시할 데이터를 삽입하려면 다음과 같이 하십시오.
const data = [
        {
          name: "Jack",
          age: 28,
          email: "[email protected]",
          key: "1",
          permanent: "yes",
        },
        {
          name: "Rose",
          age: 36,
          email: "[email protected]",
          key: "2",
          permanent: "no",
        },]
이제 다음과 같이 Return 문에서 Table 태그의 열을 바인딩합니다.
return (
        <Table
          columns={columns}
          data={data}
          tableLayout="auto"
        />
      );
테이블을 렌더링하려면 응용 프로그램으로 RcTable 구성 요소를 가져옵니다.js 파일:
import { Rctable } from "./components/rctable";
    function App() {
      return (
        <div className="app">
          <div className="containers">
            <Rctable />
          </div>
        </div>
      );
    }

Rsuite 표


가상화, 고정 제목 및 열, 트리 뷰 등을 지원하는 다기능 React 테이블 구성 요소입니다.이 창고의 가장 좋은 부분 중 하나는 정렬을 매우 간단하게 하는 것이다.

우세하다


• 특이한 기능(오른쪽에서 왼쪽으로 정렬 폭, 확장 가능한 하위 노드)
• 많은 구성 요소(마운트기, 버튼, 모듈)
• 대용량 파일

결점


• 복잡한 기본 스타일 규칙 때문에 사용자 정의 스타일이 복잡할 수 있음
** NPM을 통해 관련 패키지를 설치합니다.
npm install rsuite-table
rsuiteTable라는 구성 요소를 만듭니다.js 및 rsuite 테이블 모듈 가져오기
import { Table } from "rsuite-table";
Create a JSON file named users.json and add a list of users to it:
[{
            "id": 1,
            "avartar": "https://s3.amazonaws.com/uifaces/faces/twitter/justinrob/128.jpg",
            "city": "New Amieshire",
            "email": "[email protected]",
            "firstName": "Ernest Schuppe SchuppeSchuppeSchuppeSchuppeSchuppeSchuppe Schuppe",
            "lastName": "Schuppe",
            "street": "Ratke Port",
            "zipCode": "17026-3154",
            "date": "2016-09-23T07:57:40.195Z",
            "bs": "global drive functionalities",
            "catchPhrase": "Intuitive impactful software",
            "companyName": "Lebsack - Nicolas",
            "words": "saepe et omnis",
            "sentence": "Quos aut sunt id nihil qui.",
            "stars": 820,
            "followers": 70
        }
]
사용자를 가져옵니다.json과 rsuite표.css 파일을 rsuiteTable로 가져옵니다.js:
import fakeData from "./users.json";
import "rsuite-table/dist/css/rsuite-table.css";
테이블의 열과 옵션을 정의하는 다음 코드 세그먼트를 포함하는 내보내기 함수를 만듭니다.
export const Rsuittable = () => {
      const [fakeDatum] = useState(fakeData);


      return (
        <Table data={fakeDatum} height={400}>
          <Column width={100} align="center" fixed resizable>
            <HeaderCell>ID</HeaderCell>
            <Cell dataKey="id" />
          </Column>
          <Column width={150} align="center" fixed resizable>
            <HeaderCell>First Name</HeaderCell>
            <Cell dataKey="firstName" />
          </Column>
          <Column width={150} align="center" fixed resizable>
            <HeaderCell>Last Name</HeaderCell>
            <Cell dataKey="lastName" />
          </Column>
          <Column width={200} align="center" sortable fixed resizable>
            <HeaderCell>City</HeaderCell>
            <Cell dataKey="city" />
          </Column>
          <Column width={300} align="center" sortable={true} fixed resizable>
            <HeaderCell>Street</HeaderCell>
            <Cell dataKey="street" />
          </Column>
          <Column width={300} align="center" fixed resizable>
            <HeaderCell>Company Name</HeaderCell>
            <Cell dataKey="companyName" />
          </Column>
          <Column width={200} align="center" fixed resizable>
            <HeaderCell>Email</HeaderCell>
            <Cell dataKey="email" />
          </Column>
          <Column width={120} fixed="right">
            <HeaderCell>Action</HeaderCell>
            <Cell>
              {(rowData) => {
                function handleAction() {
                  alert(`id:${rowData.id}`);
                }
                return (
                  <span>
                    <a onClick={handleAction}>
                      {" "}
                      <b>Edit</b>{" "}
                    </a>{" "}
                    |
                    <a onClick={handleAction}>
                      {" "}
                      <b>Remove</b>{" "}
                    </a>
                  </span>
                );
              }}
            </Cell>
          </Column>
        </Table>
      );
    };

Import Rsuittable.js component into the App.js file.
import { Rsuittable } from "./components/rsuitTable";
    function App() {
      return (
        <div className="app">
          <div className="containers">
            <Rsuittable />
          </div>
        </div>
      );
    }

반응대


React Table는 무게가 가볍고 속도가 빠르며 맞춤형 제작이 쉽고 확장이 가능하여 React 응용프로그램에 적합하다.그것은 선택할 수 있는 도구와 리셋을 통해 완전히 제어할 수 있다.GitHub에 있는 11000여 개의 별은 모든 React 응용 프로그램에 가장 좋은 선택이 된다.

우세하다


• 간편한 설계 및 맞춤형 구성
• 클라이언트 및 서버측 페이지 나누기 지원
• 회전 및 집선 지원

결점


• 최소 파일
NPM을 통해 해당 패키지를 설치합니다.
npm install react-table
reactTable라는 어셈블리를 생성합니다.js 및 react table 모듈 가져오기
import { useTable } from "react-table";

Now create an export function named Reacttable:
export const Reacttable = () => {}
위의 내보내기 함수에 다음 코드를 삽입하여 테이블의 열을 정의합니다.
const columns = [
        {
          Header: "Name",
          accessor: "name",
        },
        {
          Header: "Age",
          accessor: "age",
        },
        {
          Header: "Email",
          accessor: "email",
        },
        {
          Header: "City",
          accessor: "city",
        },
      ];
테이블에 표시할 데이터를 추가하려면 다음과 같이 하십시오.
const data = [
        {
          name: "Ayaan",
          age: 26,
          email:'[email protected]',
          city:'Colombo'
        },
        {
          name: "Ahana",
          age: 22,
          email:'[email protected]',
          city:'Kandy'
        }
]
react table 모듈의 useTable 속성을 사용하여 다음과 같이 동작을 정의합니다.
const {
        getTableProps,
        getTableBodyProps,
        headerGroups,
        rows,
        prepareRow,
      } = useTable({
        columns,
        data,
      });
return 문에 다음 코드를 추가하여 테이블과 해당 열, 옵션 및 데이터를 반환합니다.
return (
        <table {...getTableProps()}>
          <thead>
            {headerGroups.map((headerGroup) => (
              <tr {...headerGroup.getHeaderGroupProps()}>
                {headerGroup.headers.map((column) => (
                  <th {...column.getHeaderProps()}>{column.render("Header")}</th>
                ))}
              </tr>
            ))}
          </thead>
          <tbody {...getTableBodyProps()}>
            {rows.map((row, i) => {
              prepareRow(row);
              return (
                <tr {...row.getRowProps()}>
                  {row.cells.map((cell) => {
                    return <td {...cell.getCellProps()}>{cell.render("Cell")}</td>;
                  })}
                </tr>
              );
            })}
          </tbody>
        </table>
      );
Reacttable 구성 요소를 응용 프로그램으로 가져옵니다.js 파일.
import { Reacttable } from "./components/reactTable";
    function App() {
     return (
     <div className="app">
     <div className="containers">
     <Reacttable />
     </div>
     </div>
     );
    }

재료 UI 데이터 시트


Material UI 데이터 테이블은 Material UI를 기반으로 한 또 다른 테이블 라이브러리로 응답 데이터 테이블을 구축하는 데 사용됩니다.모바일 장치에는 세 가지 응답 모드인 수직, 표준, 간단이 있습니다.GitHub에는 1500여 개의 별이 있어 인기가 많다.

우세하다


• 맞춤형 구성 요소 및 스타일 제공
• 모든 장치에 대한 높은 응답
• 필터링, 열 보기/숨기기, 페이지 나누기, 정렬 등의 프로세스 단순화
• 상세하고 명확한 파일

결점


• 외부 라이브러리를 통한 현지화는 지원되지 않음
** 먼저 mui 데이터 테이블의 요구 사항에 따라 material ui/core 및 material fonts 라이브러리를 설치합니다.
npm install @material-ui/core @material-ui/icon
mui datatables 패키지를 설치합니다.
npm install mui-datatables
muidatable이라는 구성 요소를 만듭니다.js 및 mui datatables 패키지 가져오기
import MUIDataTable from "mui-datatables";
테이블에 필요한 열을 정의합니다.
const columns = [
        {
          name: "name",
          label: "Name",
          options: {
            filter: true,
            sort: true,
          },
        },
        {
          name: "company",
          label: "Company",
          options: {
            filter: true,
            sort: false,
          },
        },
        {
          name: "city",
          label: "City",
          options: {
            filter: true,
            sort: false,
          },
        },
        {
          name: "state",
          label: "State",
          options: {
            filter: true,
            sort: false,
          },
        },
      ];
그런 다음 테이블에 표시할 원본 데이터를 삽입합니다.
const data = [
        {
          name: "Joe James",
          company: "Test Corp",
          city: "Yonkers",
          state: "NY",
        },
        {
          name: "John Walsh",
          company: "Test Corp",
          city: "Hartford",
          state: "CT",
        }
]
다음과 같이 옵션에 필터 유형을 입력해야 합니다.
const options = {
        filterType: "checkbox",
      };
다음과 같이 return 문에 muidatable 태그의 열을 바인딩합니다.
return (
        <MUIDataTable
          title={"Employee List"}
          data={data}
          columns={columns}
          options={options}
        />
      );
MUIDatable 어셈블리를 응용 프로그램으로 가져옵니다.js 파일은 다음과 같습니다.
import { Muitable } from "./components/muidataTable";


    function App() {
      return (
        <div className="app">
          <div className="container">
            <Muitable />
          </div>
        </div>
      );
    }

결론


다른 React 라이브러리와 마찬가지로, 우리 목록의 라이브러리는 개발자들이 디자인 테이블의 행동과 스타일의 번거로움을 피할 수 있도록 합니다. 이것은 React와 모든 종류의 응용 프로그램에서 자주 사용됩니다.
안드로이드 테스트에서 고민을 많이 했는데 결과적으로 로봇이 됐어요.
요셉 링【dp】

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage