{"id":20350003,"url":"https://github.com/webbestmaster/react-table-pro","last_synced_at":"2025-10-14T22:32:16.477Z","repository":{"id":57346118,"uuid":"307173641","full_name":"webbestmaster/react-table-pro","owner":"webbestmaster","description":"React Table Pro","archived":false,"fork":false,"pushed_at":"2020-11-17T17:24:45.000Z","size":418,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-08-28T08:48:39.836Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://webbestmaster.github.io/react-table-pro","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/webbestmaster.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":"license","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-10-25T19:14:57.000Z","updated_at":"2020-11-17T17:24:47.000Z","dependencies_parsed_at":"2022-09-19T13:12:06.647Z","dependency_job_id":null,"html_url":"https://github.com/webbestmaster/react-table-pro","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/webbestmaster/react-table-pro","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webbestmaster%2Freact-table-pro","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webbestmaster%2Freact-table-pro/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webbestmaster%2Freact-table-pro/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webbestmaster%2Freact-table-pro/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/webbestmaster","download_url":"https://codeload.github.com/webbestmaster/react-table-pro/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webbestmaster%2Freact-table-pro/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279021785,"owners_count":26087056,"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-10-14T02:00:06.444Z","response_time":60,"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-11-14T22:28:30.657Z","updated_at":"2025-10-14T22:32:16.461Z","avatar_url":"https://github.com/webbestmaster.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Table Pro (7kb gzip)\n\n[![Build Status](https://travis-ci.org/webbestmaster/react-table-pro.svg?branch=master)](https://travis-ci.org/github/webbestmaster/react-table-pro)\n[![GitHub license](https://img.shields.io/npm/l/react-table-pro)](https://github.com/webbestmaster/react-table-pro/blob/master/license)\n[![npm version](https://img.shields.io/npm/v/react-table-pro.svg?style=flat)](https://www.npmjs.com/package/react-table-pro)\n![npm bundle size](https://img.shields.io/bundlephobia/minzip/react-table-pro)\n[![GitHub stars](https://img.shields.io/github/stars/webbestmaster/react-table-pro?style=social\u0026maxAge=2592000)](https://github.com/webbestmaster/react-table-pro/)\n\n\n**[Live demo](http://webbestmaster.github.io/react-table-pro)**\n\n\n## Install\n\n```bash\nnpm i react-table-pro\n```\n\n\n### Typing Flow\n\nUse `./flow-typed/react-table-pro.js`.\n\n\n### Typing TypeScript\n\nUse `./@types/index.d.ts`.\n\n\n## Usage example\n\n```javascript\n// @flow\nimport React, {type Node} from 'react';\nimport {Table} from 'react-table-pro';\nimport reactTableProStyle from 'react-table-pro/dist/style.css';\n\nimport type {\n    SortDirectionType,\n    TableGetDataResultType,\n    TableBodyCellType,\n    TablePropsType,\n    TableGetDataType,\n    TableHeaderType,\n    TableHeaderCellType,\n    TableCellAlignType,\n} from 'react-table-pro';\n\ntype ApiResultType = {\n    // ApiResultType are equals for TableBodyCellType for example only\n    // you can use your own structure api's data\n    +[key: string]: string | number | boolean | Node,\n};\n\n// your own function to fetch data\nexport function getDataList(\n    pageIndex: number, // page index started from 0\n    rowsPerPage: number, // number of items in response\n    sortBy: string, // id of field\n    order: SortDirectionType // asc or desc\n): Promise\u003cArray\u003cApiResultType\u003e\u003e {\n    const query = `page=${pageIndex + 1}\u0026limit=${rowsPerPage}\u0026sortBy=${sortBy}\u0026order=${order}`;\n\n    // you should catch api's error here :)\n\n    return (\n        fetch('https://5f9704ad11ab98001603b694.mockapi.io/user?' + query)\n            // $FlowFixMe\n            .then((data: Response): Promise\u003cArray\u003cApiResultType\u003e\u003e =\u003e data.json())\n    );\n}\n\nconst tableHeader: TableHeaderType = {\n    // title of table, string, required\n    title: 'User list',\n    // list of column descriptions, required\n    columnList: [\n        {\n            // unique field name in ApiResultType, string, required\n            id: 'id',\n\n            // aling of content, type TableCellAlignType = left | center | right, required\n            align: 'left',\n\n            // column's name, string, required\n            label: 'Id',\n\n            // can or can't sort by this field id, boolean, required\n            hasSort: false,\n        },\n        {id: 'isAdmin', align: 'center', label: 'Is admin', hasSort: true},\n        {id: 'login', align: 'right', label: 'Login', hasSort: true},\n    ],\n};\n\nasync function tableGetUserList(\n    pageIndex: number, // page index started from 0\n    rowsPerPage: number, // number of items in response\n    sortBy: string, // id of field\n    order: SortDirectionType, // string: 'asc' | 'desc'\n    refreshTable: () =\u003e Promise\u003cvoid\u003e // you can save and call this function to refresh table\n): Promise\u003cTableGetDataResultType\u003e {\n    const dataList: Array\u003cApiResultType\u003e = await getDataList(pageIndex, rowsPerPage, sortBy, order);\n\n    return {\n        // all elements number, number, required\n        count: 50,\n        // Array of table cell data, Array\u003cTableBodyCellType\u003e, required\n        list: dataList,\n    };\n}\n\nexport function App(): Node {\n    return (\n        \u003cTable\n            // function to get data, type TableGetDataType, required\n            getData={tableGetUserList}\n            // table header data, type TableHeaderType, required\n            header={tableHeader}\n        /\u003e\n    );\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebbestmaster%2Freact-table-pro","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwebbestmaster%2Freact-table-pro","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebbestmaster%2Freact-table-pro/lists"}