{"id":25562494,"url":"https://github.com/a-simplecode/react-next-table","last_synced_at":"2025-04-12T07:17:21.660Z","repository":{"id":57341870,"uuid":"409740135","full_name":"a-simplecode/react-next-table","owner":"a-simplecode","description":"Smart and simple react  bootstrap table","archived":false,"fork":false,"pushed_at":"2022-03-29T19:26:24.000Z","size":1277,"stargazers_count":8,"open_issues_count":5,"forks_count":4,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-12T07:17:16.355Z","etag":null,"topics":["bootstrap","css","html5","javascript","nextjs","reactjs"],"latest_commit_sha":null,"homepage":"https://www.simplecode.app","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-3-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/a-simplecode.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":"2021-09-23T20:50:34.000Z","updated_at":"2024-03-26T11:16:46.000Z","dependencies_parsed_at":"2022-09-16T03:01:21.623Z","dependency_job_id":null,"html_url":"https://github.com/a-simplecode/react-next-table","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/a-simplecode%2Freact-next-table","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/a-simplecode%2Freact-next-table/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/a-simplecode%2Freact-next-table/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/a-simplecode%2Freact-next-table/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/a-simplecode","download_url":"https://codeload.github.com/a-simplecode/react-next-table/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248530609,"owners_count":21119601,"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":["bootstrap","css","html5","javascript","nextjs","reactjs"],"created_at":"2025-02-20T19:23:11.477Z","updated_at":"2025-04-12T07:17:21.616Z","avatar_url":"https://github.com/a-simplecode.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n   \u003cbr/\u003e\n   \u003ca href=\"https://wwww.simplecode.app\" target=\"_blank\"\u003e\n        \u003cimg src=\"https://i.ibb.co/MZBr6jt/simplecode.png\" width=\"200\" height=\"200\" alt=\"Simple Code Logo\"/\u003e\n        \u003ch1 align=\"center\"\u003eSimpleCode\u003c/h1\u003e\n    \u003c/a\u003e\n   \u003ch3 align=\"center\"\u003eSmartTable.js\u003c/h3\u003e\n   \u003cp align=\"center\"\u003elight weight bootstrap smart table\u003c/p\u003e\n   \u003cp align=\"center\"\u003e\n   Open Source.\n   \u003c/p\u003e\n   \u003cp align=\"center\"\u003e      \n   \u003ca href=\"https://www.npmtrends.com/react-next-table\"\u003e\n        \u003cimg src=\"https://img.shields.io/npm/dy/react-next-table\" alt=\"Downloads\" /\u003e\n      \u003c/a\u003e\n      \u003ca href=\"https://github.com/a-simplecode/react-next-table/stargazers\"\u003e\n        \u003cimg src=\"https://img.shields.io/github/stars/a-simplecode/react-next-table\" alt=\"Github Stars\" /\u003e\n      \u003c/a\u003e\n      \u003ca href=\"https://bundlephobia.com/result?p=react-next-table\"\u003e\n        \u003cimg src=\"https://img.shields.io/bundlephobia/minzip/react-next-table\" alt=\"Bundle Size\"/\u003e\n      \u003c/a\u003e\n      \u003ca href=\"https://packagequality.com/#?package=react-next-table\"\u003e\n        \u003cimg src=\"https://packagequality.com/shield/react-next-table.svg\" alt=\"Bundle Size\"/\u003e\n      \u003c/a\u003e\n      \u003ca href=\"https://www.npmjs.com/package/react-next-table\"\u003e\n        \u003cimg src=\"https://img.shields.io/github/v/release/a-simplecode/react-next-table?label=latest\" alt=\"Github Stable Release\" /\u003e\n      \u003c/a\u003e\n      \u003cimg src=\"https://img.shields.io/github/v/release/a-simplecode/react-next-table?include_prereleases\u0026label=prerelease\u0026sort=semver\" alt=\"Github Prelease\" /\u003e\n   \u003c/p\u003e\n   \u003ch3 align=\"center\"\u003e\n   Visit my \u003ca href=\"https://www.simplecode.app\"\u003eWebsite\u003c/a\u003e for docs, guides, API and more!\n   \u003c/h3\u003e\n   \u003cbr/\u003e\u003cbr/\u003e\n\u003c/p\u003e\n\n## Demo:\n\nCheck my website for a live paginated [Demo](https://www.simplecode.app/packages/react-next-table).\n\n\u003cbr/\u003e\n\n## Overview:\n\nSmartTable.js is a complete open source solution for [React.js](https://reactjs.org) applications.\n\n\u003cbr/\u003e\n\n## Getting Started:\n\n```javascript\nnpm install --save react-next-table\nOr\nyarn add react-next-table\n```\n\nYou also need to install Bootstrap package.\n\n```javascript\nnpm install --save bootstrap\nOr\nyarn add bootstrap\n```\n\nAdd the following imports to app.js\n\n```javascript\nimport 'bootstrap/dist/css/bootstrap.min.css';\nimport 'react-next-table/dist/SmartTable.css';\n```\n\nThis component will be upgraded and updated regularly for better use, in the smallest package with a simple smart set of codes.\n\n\u003cbr/\u003e\n\n## Features:\n\n### Flexible and easy to use\n\n- Based on Bootstrap for css styling and classes.\n- Designed to work with any react project and any react framework like [NextJs](https://nextjs.org)\n- Compatible in all browsers like (chrome, safari, firefox, opera...)\n- Supports sorting columns.\n- Supports Custom columns.\n- Supports search.\n- Supports pagination if an api url added for better SEO and user experience.\n- Supports external data by props data and internal data by adding the api url.\n\n\u003cbr/\u003e\n\n## Props:\n\n| prop name              |             required              | options                          | description                                                                                                                                                                                                                                                                                                                                                              |\n| ---------------------- | :-------------------------------: | -------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| **headCells**          |              `true`               | Array of object                  | The **headCells** props tell the component what columns do you want to show from the array and how you want to show it. There are some required object keys: `id`, `label`, `width` (as integer in px); and other options like: `sortable` (bool), `numeric` (bool !helps to sort as number!), `render` (a custom column, html, css, javascript, react !you can do all!) |\n| **data**               | `true` if `url` prop is not used  | Array of object                  | Prerendered data useful if using [NextJs](http://nextjs.org) framework for server side rendering OR `url` prop can't be used in your case...                                                                                                                                                                                                                             |\n| **url**                | `true` if `data` prop is not used | String                           | fetch data on the component mount if prop `data` doesn't exist. And on search adding a query param called `search`, on row number change adding a query param called `limit` and on page change adding a query param called `page`. The best news is that they also work as a combination on the this `url` prop that will work as `paginated api`                       |\n| **title**              |              `false`              | String/React component           | It's mainly to be a title or a button                                                                                                                                                                                                                                                                                                                                    |\n| **searchDebounceTime** |              `false`              | Integer default is 800 in (ms)   | configure the time you need the search api to start seaching after stop typing in the search box                                                                                                                                                                                                                                                                         |\n| **noPagination**       |              `false`              | Boolean                          |                                                                                                                                                                                                                                                                                                                                                                          |\n| **rowsPerPage**        |              `false`              | Integer default is 10            |                                                                                                                                                                                                                                                                                                                                                                          |\n| **rowsPerPageOptions** |              `false`              | array default is [5, 10, 25, 50] |                                                                                                                                                                                                                                                                                                                                                                          |\n\n\u003cbr/\u003e\n\n## Example:\n\n### Add React Component\n\n```javascript\nimport SmartTable from 'react-next-table';\n\nconst headCells = [\n  {\n    id: 'email',\n    numeric: false,\n    label: 'Email',\n    width: 200,\n  },\n  {\n    id: 'name',\n    numeric: false,\n    label: 'Name',\n    width: 150,\n  },\n  {\n    id: 'phone',\n    numeric: false,\n    label: 'Phone',\n    width: 100,\n  },\n  {\n    id: 'subject',\n    numeric: false,\n    label: 'Subject',\n    width: 300,\n  },\n  {\n    id: 'message',\n    numeric: false,\n    label: 'Message',\n    width: 700,\n  },\n];\n\nconst data = [\n  {\n    _id: '6144145976c7fe',\n    email: 'minageres123@gmail.com',\n    name: 'Mina',\n    phone: '+9617099995114',\n    subject: 'test',\n    message: 'ahlannn',\n    date: '2021-09-17 19:10:50',\n  },\n  {\n    _id: '6143989f9d87cc',\n    email: 'as@a.com',\n    name: 'as',\n    phone: '+9617646699991',\n    subject: 'as',\n    message: 'as',\n    date: '2021-09-16 22:18:31',\n  },\n  {\n    _id: '614397edc9177d8c8',\n    email: 'amine@amine.com',\n    name: 'amine',\n    phone: '+334343439393993',\n    subject: '1234',\n    message: '3434',\n    date: '2021-09-16 22:15:57',\n  },\n  {\n    _id: '6143be67dfca4985c',\n    email: 'dominique.amine@gmail.com',\n    name: 'Dominique',\n    phone: '+96189904686',\n    subject: 'Dev ',\n    message: 'Ohmaga',\n    date: '2021-09-16 21:33:04',\n  },\n  {\n    _id: '61141e57a7dbd8a189e',\n    email: 'amineamine19961996@gmail.com',\n    name: 'amine amine',\n    phone: '+96176776341',\n    subject: 'qw',\n    message: 'qw',\n    date: '2021-08-11 22:00:39',\n  },\n];\n\nexport default function Exemple() {\n  return \u003cSmartTable title=\"Emails\" data={data} headCells={headCells} /\u003e;\n}\n```\n\n\u003cbr/\u003e\n\n## License\n\nISC\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fa-simplecode%2Freact-next-table","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fa-simplecode%2Freact-next-table","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fa-simplecode%2Freact-next-table/lists"}