@1productaweek/react-virtualized-grid 中文文档教程

发布于 4年前 浏览 20 项目主页 更新于 3年前

React Virtualized Grid

基于 React Virtualized 的虚拟化网格。 使用 @emotion 进行样式设置。

Install

yarn add @1productaweek/react-virtualized-grid

Usage

import React from 'react'
import Grid from '@1productaweek/react-virtualized-grid'

const columns = [
  { key: 'id', title: 'ID', editable: true, width: 40, icon: Icon },
  { key: 'title', title: 'Title', editable: true },
  { key: 'complete', title: 'Complete', editable: true, width: 300 },
  { key: 'success', title: 'Success', width: 100 },
  { key: 'started', title: 'Started At', width: 100 },
  { key: 'custom', title: 'Custom', component: () => <div>Custom!</div> },
]

const rows = [
  { id: 10, title: 'Task 1', complete: 20, success: true, started: new Date() },
  { id: 20, title: 'Task 2', complete: 40, success: true },
  { id: 30, title: 'Task 3', complete: 60, success: false },
  { id: 40, title: 'Task 4', complete: 20, success: true },
]

export default function Container () {
  return (
      <Grid
        columns={columns}
        rowCount={rows.length}
        rowGetter={i => rows[i]}
      />
  )
}

Demo

https://react-virtualized-grid.netlify.app

Made by 1PAW

https://1productaweek.com

React Virtualized Grid

Virtualized grid based on React Virtulalized. Uses @emotion for styling.

Install

yarn add @1productaweek/react-virtualized-grid

Usage

import React from 'react'
import Grid from '@1productaweek/react-virtualized-grid'

const columns = [
  { key: 'id', title: 'ID', editable: true, width: 40, icon: Icon },
  { key: 'title', title: 'Title', editable: true },
  { key: 'complete', title: 'Complete', editable: true, width: 300 },
  { key: 'success', title: 'Success', width: 100 },
  { key: 'started', title: 'Started At', width: 100 },
  { key: 'custom', title: 'Custom', component: () => <div>Custom!</div> },
]

const rows = [
  { id: 10, title: 'Task 1', complete: 20, success: true, started: new Date() },
  { id: 20, title: 'Task 2', complete: 40, success: true },
  { id: 30, title: 'Task 3', complete: 60, success: false },
  { id: 40, title: 'Task 4', complete: 20, success: true },
]

export default function Container () {
  return (
      <Grid
        columns={columns}
        rowCount={rows.length}
        rowGetter={i => rows[i]}
      />
  )
}

Demo

https://react-virtualized-grid.netlify.app

Made by 1PAW

https://1productaweek.com

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文