Sử dụng và custom griddle trong reactjs

Griddle là 1 component tạo ra table hiển thị dữ liệu, có hỗ trợ tìm kiếm , phân trang

1.Cài đặt gói griddle:

npm install --save griddle-react@beta

import vào project:

mport React from 'react';
import Griddle from 'griddle-react';

1. Sử dụng render ra bảng:

<Griddle
    data={data}
    plugins={[plugins.LocalPlugin]}
  >
    <RowDefinition>
      <ColumnDefinition id="name" title="Name" />
      <ColumnDefinition id="state" title="Location" order={1} awidth={400} />
      <ColumnDefinition id="company" title="Organization" />
    </RowDefinition>
  </Griddle>

cấu trúc của biến data:

var data = [
  {
    "id": 0,
    "name": "Mayer Leonard",
    "city": "Kapowsin",
    "state": "Hawaii",
    "country": "United Kingdom",
    "company": "Ovolo",
    "favoriteNumber": 7
  },
  ...
];

Tương ứng các id trong ColumnDefinition với dữ liệu trong biến data, sẽ là cách hiển thị trên bảng. Giao diện mặc định sẽ được hiển thị như sau: <image>

1. Custom griddle a> Custom bằng cách truyền các props thông quá các prototype định nghĩa sẵn: -- Custom layout `const NewLayout = ({ Table, Pagination, Filter, SettingsWrapper }) => (

<div> <Filter /> <Pagination /> <Table /> </div> ); ... <Griddle ... components={{ Layout: NewLayout }} />` -- Custom bằng cách truyền props: ``` <Griddle data={fakeData}> <RowDefinition> <ColumnDefinition id="name" customComponent={CustomColumn} />> <ColumnDefinition id="state" customHeading={CustomHeading}/> <ColumnDefinition id="company" /> </RowDefinition> </Griddle> ``` Truyền props vào các prams ví dụ customHeading sẽ thay đổi giao diện heading của column b> Custom bằng cách thay đổi component: ``` components: { Row: MyCustomRowComponent, // The base Row component will be overwritten } ``` Định nghĩa component MyCustomRowComponent để thay đổi nó, Các dữ liệu cần thiết là props đêù được hỗ trợ Tên các props này xem trong chỗ này nhé: http://griddlegriddle.github.io/Griddle/docs/api/ c> Custom event ``` <Griddle ... events={{ onFilter: (filterText) => {}, onSort: (sortProperties) => {}, onNext: () => {}, onPrevious: () => {}, onGetPage: (pageNumber) => {}, }} /> ``` d> Custom giao diện: ``` { icons: { TableHeadingCell: { sortDescendingIcon: '▼', sortAscendingIcon: '▲' }, }, classNames: { Cell: 'griddle-cell', Filter: 'griddle-filter', Loading: 'griddle-loadingResults', NextButton: 'griddle-next-button', NoResults: 'griddle-noResults', PageDropdown: 'griddle-page-select', Pagination: 'griddle-pagination', PreviousButton: 'griddle-previous-button', Row: 'griddle-row', RowDefinition: 'griddle-row-definition', Settings: 'griddle-settings', SettingsToggle: 'griddle-settings-toggle', Table: 'griddle-table', TableBody: 'griddle-table-body', TableHeading: 'griddle-table-heading', TableHeadingCell: 'griddle-table-heading-cell', TableHeadingCellAscending: 'griddle-heading-ascending', TableHeadingCellDescending: 'griddle-heading-descending', }, styles: { } }; ``` Thêm các class để custom bằng css.

Trên đây là bài tìm hiểu tổng quát về griddle. Ai có ý kiển hay thắc mắc thì comment ở dưới nhé.