{"id":28228991,"url":"https://github.com/sinamalizadeh/reactjs-simple-table","last_synced_at":"2025-06-13T02:32:32.442Z","repository":{"id":57348347,"uuid":"353465463","full_name":"SinaMAlizadeh/reactjs-simple-table","owner":"SinaMAlizadeh","description":"reactjs simple table ","archived":false,"fork":false,"pushed_at":"2021-04-08T13:18:38.000Z","size":241,"stargazers_count":3,"open_issues_count":0,"forks_count":3,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-05-18T15:13:27.712Z","etag":null,"topics":["bootsrap-table","react","react-boostrap-table","react-table","reactjs-simple-table","server-side","server-side-reactja-table","table","table-comp"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/SinaMAlizadeh.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-03-31T19:18:32.000Z","updated_at":"2024-05-13T06:08:34.000Z","dependencies_parsed_at":"2022-08-31T18:50:29.405Z","dependency_job_id":null,"html_url":"https://github.com/SinaMAlizadeh/reactjs-simple-table","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/SinaMAlizadeh/reactjs-simple-table","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SinaMAlizadeh%2Freactjs-simple-table","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SinaMAlizadeh%2Freactjs-simple-table/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SinaMAlizadeh%2Freactjs-simple-table/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SinaMAlizadeh%2Freactjs-simple-table/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/SinaMAlizadeh","download_url":"https://codeload.github.com/SinaMAlizadeh/reactjs-simple-table/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SinaMAlizadeh%2Freactjs-simple-table/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259567129,"owners_count":22877645,"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","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":["bootsrap-table","react","react-boostrap-table","react-table","reactjs-simple-table","server-side","server-side-reactja-table","table","table-comp"],"created_at":"2025-05-18T15:13:27.856Z","updated_at":"2025-06-13T02:32:32.434Z","avatar_url":"https://github.com/SinaMAlizadeh.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Simple Table\n\nA simple and reusable table for React ([Demo](Https://Codesandbox.Io/S/Reactjs-Simple-Table-Pokzv \"Demo\"))\n\nServer side table for React ([Demo](https://codesandbox.io/s/reactjs-simple-table-server-side-rul9w \"Demo\"))\n\n## Installation\n\nThe package can be installed via NPM:\n\n```\nnpm i reactjs-simple-table\n```\n\n## Usage\n\nImport SimpleTableComponent for usage :\n\n```js\nimport SimpleTableComponent from \"reactjs-simple-table\";\n```\n\nDefine your column with filed variable and header name :\n\n```js\nconst columns = [\n  {\n    field: \"title\",\n    headerName: \"Title\",\n  },\n  {\n    field: \"number\",\n    headerName: \"Amount\",\n  },\n];\n```\n\nGet your list from Api or define your list :\n\n```js\nconst list = [\n  { title: \"Michael\", number: 1 },\n  { title: \"Lindsay\", number: 10 },\n  { title: \"Tobias\", number: 6 },\n  { title: \"Byron\", number: 3 },\n  { title: \"George\", number: 1 },\n  { title: \"Rachel\", number: 10 },\n  { title: \"Lawson\", number: 6 },\n  { title: \"Ferguson\", number: 3 },\n  { title: \"Funke\", number: 1 },\n];\n```\n\nThe most basic use of the simple table can be described with:\n\n```js\n\u003cSimpleTableComponent columns={columns} list={list} /\u003e\n```\n\n```js\nimport SimpleTableComponent from \"reactjs-simple-table\";\n\nconst columns = [\n  {\n    field: \"title\",\n    headerName: \"Title\",\n  },\n  {\n    field: \"number\",\n    headerName: \"Amount\",\n  },\n];\n\nfunction App() {\n  const list = [\n    { title: \"Michael\", number: 1 },\n    { title: \"Lindsay\", number: 10 },\n    { title: \"Tobias\", number: 6 },\n    { title: \"Byron\", number: 3 },\n    { title: \"George\", number: 1 },\n    { title: \"Rachel\", number: 10 },\n    { title: \"Lawson\", number: 6 },\n    { title: \"Ferguson\", number: 3 },\n    { title: \"Funke\", number: 1 },\n  ];\n  return (\n    \u003cdiv className=\"App\"\u003e\n      \u003cSimpleTableComponent columns={columns} list={list} /\u003e\n    \u003c/div\u003e\n  );\n}\n\nexport default App;\n```\n\n## Server Side Table\n\nImport SimpleTableComponent for usage :\n\n```js\nimport { ServerSimpleTableComponent } from \"reactjs-simple-table\";\n```\n\nFor server side , define function for get table pagation , sorting and number of items in per page parameters then update table by new data.\neach time you change any table feature like pagation,... onGetData will call and you can use table parameters :\n\n```js\nimport React, { useState } from \"react\";\nimport \"./styles.css\";\nimport { ServerSimpleTableComponent } from \"reactjs-simple-table\";\n\nconst columns = [\n  {\n    field: \"id\",\n    headerName: \"id\",\n  },\n  {\n    field: \"name\",\n    headerName: \"name\",\n  },\n  {\n    field: \"username\",\n    headerName: \"username\",\n  },\n  {\n    field: \"email\",\n    headerName: \"email\",\n  },\n];\n\nexport default function App() {\n  const [list, setList] = useState([]);\n\n  //function fo get table parameters\n  const tableData = (item) =\u003e {\n    //fetch data by filter parameters from table\n    //item :\n    // {\n    // page : 1 ,\n    // numberPerPage : 10 ,\n    // order :  \"ascending\" or \"descending\",\n    //orderby : \"title\"  *name of the field ,\n    //}\n    fetch(\n      `https://yourServerUrl/users?page=${item.page}\u0026pageSize=${item.numberPerPage}`\n    ).then((response) =\u003e setList(json));\n  };\n\n  return (\n    \u003cdiv className=\"App\"\u003e\n      \u003cServerSimpleTableComponent\n        columns={columns}\n        list={list}\n        onGetData={tableData}\n        total={10}\n        serverSideFiltering={false}\n      /\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n## User guide\n\n| Prop name           | Description                                                                                                                                                                                                                      | Default value | Example values         |\n| ------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- | ---------------------- |\n| total               | Total of list , for using sever side table is required                                                                                                                                                                           | list.length() | 100                    |\n| numberPerPage       | number of row in each page                                                                                                                                                                                                       | 10            | 5 , 10 , 20 , 50 , 100 |\n| isRtl               | for support rtl language                                                                                                                                                                                                         | false         | true or false          |\n| numberPageOfText    | for change 'of' text in pagation                                                                                                                                                                                                 | 'of'          | 'from' or 'از'         |\n| tableClassName      | you can use your own class for table style , in this case you can add boostrap or other css file in your app and use table class name and change table style                                                                     | 'myTable'     | 'table table-bordered' |\n| serverSideFiltering | you can handle server side sorting by receive 'order' and 'orderby' parameters from changes of table features , if you want sorting one page data you can set serverSideFiltering to 'true' and sorting data without server call | false         | true or false          |\n\n## Using Bootsrap\n\nFor using boostrap table class you can add boostrap css to Index.js or App.js , then add _tableClassName_ property in SimpleTableComponent and use your table class :\n\n```\nnpm i bootstrap\n\n```\n\n```js\nimport SimpleTableComponent from \"reactjs-simple-table\";\nimport \"bootstrap/dist/css/bootstrap.min.css\";\n\nconst columns = [\n  {\n    field: \"title\",\n    headerName: \"Title\",\n  },\n  {\n    field: \"number\",\n    headerName: \"Amount\",\n  },\n];\n\nfunction App() {\n  const list = [\n    { title: \"Michael\", number: 1 },\n    { title: \"Lindsay\", number: 10 },\n    { title: \"Tobias\", number: 6 },\n    { title: \"Byron\", number: 3 },\n    { title: \"George\", number: 1 },\n    { title: \"Rachel\", number: 10 },\n    { title: \"Lawson\", number: 6 },\n    { title: \"Ferguson\", number: 3 },\n    { title: \"Funke\", number: 1 },\n  ];\n  return (\n    \u003cdiv className=\"App\"\u003e\n      \u003cSimpleTableComponent\n        columns={columns}\n        list={list}\n        tableClassName={\"table table-bordered\"}\n      /\u003e\n    \u003c/div\u003e\n  );\n}\n\nexport default App;\n```\n\nYou can use _table-responsive_ :\n\n```js\n\u003cdiv class=\"table-responsive\"\u003e\n  \u003cSimpleTableComponent\n    columns={columns}\n    list={list}\n    tableClassName={\"table table-bordered\"}\n  \u003e\n    ...\n  \u003c/SimpleTableComponent\u003e\n\u003c/div\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsinamalizadeh%2Freactjs-simple-table","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsinamalizadeh%2Freactjs-simple-table","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsinamalizadeh%2Freactjs-simple-table/lists"}