ADD: props deails in readme

Author: a-simplecode

README.md

@@ -56,6 +56,19 @@ This component will be upgraded and updated regularly for better use, in the sma
 - Supports search.
 - Supports pagination if an api url added for better SEO and user experience.
 - Supports external data by props data and internal data by adding the api url.
+## Props
+
+
+| prop name | required | options | description |
+| --------- |:--------:| ------- | ----------- |
+| **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!)  |
+| **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...|
+| **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` |
+| **title** | `false` | String/React component | It's mainly to be a title or a button |
+| **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|
+| **noPagination** | `false` | Boolean | |
+| **rowsPerPage** | `false` | Integer default is 10 | |
+| **rowsPerPageOptions** | `false` | array default is [5, 10, 25, 50] | |
 
 ## Example
 
@@ -106,43 +119,25 @@ const headCells = [
 
 const data = [
   {
-    _id: "6144e83a966145976c75cdfe",
-    email: "minagerges123@gmail.com",
+    _id: "6144145976c7fe",
+    email: "minageres123@gmail.com",
     name: "Mina",
-    phone: "+96170345114",
+    phone: "+9617099995114",
     subject: "test",
     message: "ahlannn",
     date: "2021-09-17 19:10:50",
   },
   {
-    _id: "61439914086a4f4e9f9d87cd",
-    email: "amineamine1996@gmail.com",
-    name: "amine amine",
-    phone: "+96176466341",
-    subject: "12121",
-    message: "121212121212121",
-    date: "2021-09-16 22:20:52",
-  },
-  {
-    _id: "61439887086a4f4e9f9d87cc",
+    _id: "6143989f9d87cc",
     email: "as@a.com",
     name: "as",
-    phone: "+96176466341",
+    phone: "+9617646699991",
     subject: "as",
     message: "as",
     date: "2021-09-16 22:18:31",
   },
   {
-    _id: "6143985d086a4f4e9f9d87cb",
-    email: "amineamine19961996@gmail.com",
-    name: "amine amine",
-    phone: "+96176466341",
-    subject: "1234",
-    message: "sdsdsd",
-    date: "2021-09-16 22:17:49",
-  },
-  {
-    _id: "614397edcbfc69177da008c8",
+    _id: "614397edc9177d8c8",
     email: "amine@amine.com",
     name: "amine",
     phone: "+334343439393993",
@@ -151,46 +146,19 @@ const data = [
     date: "2021-09-16 22:15:57",
   },
   {
-    _id: "6143b810d713e67dfca4985c",
+    _id: "6143be67dfca4985c",
     email: "dominique.amine@gmail.com",
     name: "Dominique",
-    phone: "+96181304686",
+    phone: "+96189904686",
     subject: "Dev ",
     message: "Ohmaga",
     date: "2021-09-16 21:33:04",
   },
   {
-    _id: "61439b2f0b93c171aa1cf475",
-    email: "amineamine19961996@gmail.com",
-    name: "Jean Claude Samaha Bartender",
-    phone: "+96170492931",
-    subject: "cv application",
-    message: "hello amine this a test email ",
-    date: "2021-09-16 19:29:51",
-  },
-  {
-    _id: "6117aeca1e925fd9dbc2bc6d",
-    email: "amineamine19961996@gmail.com",
-    name: "amine amine",
-    phone: "+96176466341",
-    subject: "1234",
-    message: "wwww",
-    date: "2021-08-14 14:53:46",
-  },
-  {
-    _id: "61141f32cbfa7dbd8dba189f",
-    email: "amineamine19961996@gmail.com",
-    name: "amine amine",
-    phone: "+96176466341",
-    subject: "aa",
-    message: "23232",
-    date: "2021-08-11 22:04:18",
-  },
-  {
-    _id: "61141e57cbfa7dbd8dba189e",
+    _id: "61141e57a7dbd8a189e",
     email: "amineamine19961996@gmail.com",
     name: "amine amine",
-    phone: "+96176466341",
+    phone: "+96176776341",
     subject: "qw",
     message: "qw",
     date: "2021-08-11 22:00:39",
@@ -203,9 +171,6 @@ export default function Exemple() {
       title="Emails"
       data={data}
       headCells={headCells}
-      // url="/api/admin/emails"
-      // searchDebounceTime={800}
-      // noPagination
     />
   );
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-next-table",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "The SmartTable is a react simple Component based on HTML, CSS, JavaScript, bootstrap. Used for fetching data from a defined api with an option of pagination and search. You can find also many useful options like sorting, selecting columns to show, custom render of cells, fully responsive on all devices, custom react title...",
   "author": "a-simplecode",
   "keywords": [