redux-devtools-grid-monitor

redux-devtools visualizer utilizing gridiron.

gridiron

Lightweight grid framework built on top of react-virtualized / fixed-data-table for easy highly customizable grids generated from redux state.

Install

npm i -S gridiron

Usage

UserGrid.js

import React from 'react'
import { connect } from 'react-redux'
import ReactVirtualized from 'react-virtualized'
import { createGrid } from 'gridiron'

const { Grid } = createGrid({ React, connect, ReactVirtualized })

/** Create a grid to show users first name, last name, and age from redux */
export default props => (
  <Grid
    mapCols={
      /** Map redux state to object with column name keys and header component values */
      state => ({ first: <div>First Name</div>
                , last: <div>Last Name</div>
                , age: { render: <div>Age</div>, width: 100 }
                })
    }
    mapRows={
      /** Map redux state to grid rows. */
      state => state.users.map(x => [x.first, x.last, x.age])
    }
  />
)

Test

See gridiron's test project at gridiron-test

In active development, come back in a few days.

HomePage

https://github.com/noderaider/gridiron#readme

Repository

https+https://github.com/noderaider/gridiron


上一篇:redux-devtools-multiple-monitors
下一篇:redux-blueprint

相关推荐

  • 采用20/80原则学习 CSS Grid 布局

    采用20 / 80原则学习和使用 Grid 布局。 介绍 本文不会覆盖Grid 布局的所有细节,而是面向那些想快速用起来并看到效果的你们。我将会向你介绍 Grid 技术的20%,学会了这些你就掌...

    2 年前
  • 谈谈我vue-devtools安装过程中踩到的坑

    前言 vuedevtools是一款用来调试vue应用的插件,它能大大地提高vue的调试效率。近期在折腾vue时想使用这款开发利器,结果踩到许多坑,在这里分享给大家。

    2 年前
  • 调整jqGrid浏览器时调整?

    Justin Ethier(https://stackoverflow.com/users/101258/justinethier)提出了一个问题:Resize jqGrid when browser...

    2 年前
  • 表格组件GridManager的固定列详解

    从2019年初时,就想添加固定列功能。但由于是源生编码而又需要支持框架的引用,调试来调试去,空留下一个fixed分支。 受今年疫情的影响,周未有了大把的时间。于是把去年未完成的固定列功能进行了实现...

    21 天前
  • 表格组件 GridManager Angular 1.x

    基于 Angular 1.x 的 GridManager 封装, 用于便捷的在 Angular 中使用GridManager. image(https://img.javascriptcn.com...

    1 年前
  • 聊聊Chrome DevTools中你可能不知道的调试技巧

    对于前端开发者来说, 绝对是不可或缺的调试工具,我们常用的调试方法包含一些 等,而 其实很强大,下面来聊聊一些你可能不知道的 方法。 同步发表于微信公证号:前端微志 Scroll ...

    2 年前
  • 精读《用 css grid 重新思考布局》

    1 引言 Flex 与 Grid 相比就像功能键盘和触摸屏。触摸屏的控制力相比功能键盘来说就像是降维打击,因为功能键盘只能上下左右控制(x、y 轴),而触摸屏打破了布局障碍,直接从(z 轴)触达,...

    6 个月前
  • 类似 easyui 中 datagrid 使用习惯的 element-ui 数据表格组件(el-datagrid)

    背景 中的 组件只提供了数据展示,而分页功能作为一个单独的组件 ,并没有像 一样集成到 组件中,并且每一个数据列也都是一个单独的组件 。 在开发过程中就出现了一个很明显的问题:业务中的大...

    6 个月前
  • 爬虫新姿势 - 使用Chrome Devtools写一个小说爬虫

    目前,绝大部分的爬虫教程都是基于Python和Node.js。其实,只要有Chrome浏览器,使用Chrome F12打开的的Devtools就能随时随地轻轻松松写一个爬虫,完全不用装其它语言环境。

    2 年前
  • 深入了解最新的Vue Devtools v5.0

    unnamed.jpg(https://img.javascriptcn.com/0d0508ed2413d6a579ee652d4342fe9e "unnamed.jpg") 早些时候发布了Vue...

    1 年前

官方社区

扫码加入 JavaScript 社区