{"id":13805450,"url":"https://github.com/kagawagao/react-grid","last_synced_at":"2025-07-28T10:41:58.165Z","repository":{"id":90886784,"uuid":"50970755","full_name":"kagawagao/react-grid","owner":"kagawagao","description":"[Deprecated]React UI Component - Grid(Based on Ant Design)","archived":false,"fork":false,"pushed_at":"2016-11-23T03:24:27.000Z","size":134,"stargazers_count":10,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-10T12:47:26.281Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/kagawagao.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2016-02-03T03:20:51.000Z","updated_at":"2019-06-21T08:49:31.000Z","dependencies_parsed_at":"2023-06-07T21:31:27.685Z","dependency_job_id":null,"html_url":"https://github.com/kagawagao/react-grid","commit_stats":{"total_commits":38,"total_committers":2,"mean_commits":19.0,"dds":0.02631578947368418,"last_synced_commit":"9b705f409e72e0662ae0dd266ce8baafbea3f7d1"},"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"purl":"pkg:github/kagawagao/react-grid","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kagawagao%2Freact-grid","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kagawagao%2Freact-grid/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kagawagao%2Freact-grid/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kagawagao%2Freact-grid/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kagawagao","download_url":"https://codeload.github.com/kagawagao/react-grid/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kagawagao%2Freact-grid/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":267503732,"owners_count":24098334,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-07-28T02:00:09.689Z","response_time":68,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-04T01:01:01.245Z","updated_at":"2025-07-28T10:41:58.117Z","avatar_url":"https://github.com/kagawagao.png","language":"JavaScript","funding_links":[],"categories":["Components"],"sub_categories":["Themes"],"readme":"[![Build Status](https://travis-ci.org/kagawagao/react-grid.svg?branch=master)](https://travis-ci.org/kagawagao/react-grid)\n[![npm](https://img.shields.io/npm/v/rc-grid.svg)](https://npmjs.org/package/rc-grid)\n[![bitHound Dependencies](https://www.bithound.io/github/kagawagao/react-grid/badges/dependencies.svg)](https://www.bithound.io/github/kagawagao/react-grid/master/dependencies/npm)\n[![bitHound Dev Dependencies](https://www.bithound.io/github/kagawagao/react-grid/badges/devDependencies.svg)](https://www.bithound.io/github/kagawagao/react-grid/master/dependencies/npm)\n[![bitHound Overall Score](https://www.bithound.io/github/kagawagao/react-grid/badges/score.svg)](https://www.bithound.io/github/kagawagao/react-grid)\n[![bitHound Code](https://www.bithound.io/github/kagawagao/react-grid/badges/code.svg)](https://www.bithound.io/github/kagawagao/react-grid)\n# react-grid\nReact UI Component - Grid(Based on Ant Design)\n\n![demo](https://cloud.githubusercontent.com/assets/6930280/13353550/2462a530-dcd0-11e5-98df-0f6baa4a5210.png)\n\n## Use\n```bash\n$ npm install rc-grid --save\n```\nMore detail - [See here](https://github.com/kagawagao/react-grid/tree/master/examples)\n```javascript\nimport React from 'react'\nimport Grid from 'rc-grid'\n// the default grid style\nimport 'rc-grid/style/index.less'\n// after above, you can import your style if need\n// import 'your-style.less'\nexport default class HomeView extends React.Component {\n  constructor (props) {\n    super(props)\n    const time = new Date().getTime()\n    // dataSource for single page\n    // in real time, we always fetch data through a http request. when the page change, we get the next page's data\n    const dataSource = [{\n      name: 'test',\n      id: '1',\n      created_at: new Date(time)\n    }, {\n      name: 'test',\n      id: '2',\n      created_at: new Date(time + 1000)\n    }, {\n      name: 'test',\n      id: '3',\n      created_at: new Date(time + 2000)\n    }, {\n      name: 'test',\n      id: '4',\n      created_at: new Date(time + 3000)\n    }, {\n      name: 'test',\n      id: '5',\n      created_at: new Date(time + 4000)\n    }, {\n      name: 'test',\n      id: '6',\n      created_at: new Date(time + 5000)\n    }, {\n      name: 'test',\n      id: '7',\n      created_at: new Date(time + 5000)\n    }]\n    this.state = {\n      dataSource\n    }\n  }\n  render () {\n    const { dataSource } = this.state\n    const columns = [{\n      name: 'name',\n      label: 'Name',\n      render: (name) =\u003e {\n        return name.toLowerCase()\n      },\n      span: 5\n    }, {\n      name: 'created_at', // the key in the dataSource\n      label: 'Created At', // table head label\n      sortable: 'asc', // the way to sort, sortType: asc and desc\n      sortAction: (type, name, data, event) =\u003e {\n        dataSource.sort((item1, item2) =\u003e {\n          const value = type === 'desc' ? new Date(item2.created_at).getTime() - new Date(item1.created_at).getTime()\n          :new Date(item1.created_at).getTime() - new Date(item2.created_at).getTime()\n          return value\n        })\n        this.setState({dataSource})\n      },\n      render: (created_at) =\u003e {\n        return created_at.toISOString()\n      },\n      span: 5 // you can specific a span width to one column, from 1 to 24, default is flexible\n    }]\n    const itemHeader = [{\n      name: 'id',\n      render: (id) =\u003e {\n        return `Id: ${id}`\n      }\n    }]\n    const itemActions = [{\n      name: 'Detail',\n      action: (...args) =\u003e {\n        console.log(args)\n      }\n    }, {\n      name: 'Edit',\n      action: (...args) =\u003e {\n        console.log(args)\n      }\n    }, {\n      name: 'Delete',\n      action: (...args) =\u003e {\n        console.log(args)\n      }\n    }]\n    const gridActions = [\n      {\n        name: 'Refresh',\n        action: (...args) =\u003e {\n          console.log(args)\n        }\n      }\n    ]\n    const bacthActions = [\n      {\n        name: 'Delete',\n        action: (...args) =\u003e {\n          console.log(args)\n        }\n      }\n    ]\n\n    // warning: the pagination depend on the total and size, not depend on the dataSource's length\n    const pagination = {\n      total: 100, // total count\n      size: 2, // page size\n      currentPage: 1, // current page\n      pageChange: (page) =\u003e {\n        // page change callback\n        console.log(page)\n      }\n    }\n\n    // checkable[boolean]: render checkbox for each item\n    const checkable = true\n\n    // International\n    const locale = {\n      action: 'Action',\n      no_data: 'No Data',\n      first_page: 'First Page',\n      items_per_page: '/page',\n      jump_to: 'Jump To',\n      last_page: 'Last Page',\n      next_5: 'Next 5 pages',\n      next_page: 'Next Page',\n      prev_5: 'Previous 5 pages',\n      prev_page: 'Previous Page',\n      asc: 'Ascending',\n      desc: 'Descending'\n    }\n    return (\n      \u003cdiv style={{padding: '10px 8px'}}\u003e\n        \u003cGrid\n          className='xxx-grid'\n          dataSource={dataSource}\n          columns={columns}\n          itemActions={itemActions}\n          gridActions={gridActions}\n          pagination={pagination}\n          batchActions={bacthActions}\n          locale={locale}\n          checkable={checkable}\n          itemHeader={itemHeader}\n          uniqueId='id'/\u003e\n      \u003c/div\u003e\n    )\n  }\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkagawagao%2Freact-grid","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkagawagao%2Freact-grid","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkagawagao%2Freact-grid/lists"}