added type check for json props

README.md

@@ -1,3 +1,5 @@
+# React Dynamic JSON Table
+
 | Tests                                                                         | Code Coverage | CodeFactor                                                                                                                                                                            | Sonar Cloud                                                                                                                                                                                                         | NPM Status                                                                                           | Doc's Site                                                                                                                                                          |
 | ----------------------------------------------------------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | ![Tests](https://github.com/github/docs/actions/workflows/test.yml/badge.svg) | 76.4%         | [![CodeFactor](https://www.codefactor.io/repository/github/sajrashid/react-dynamic-json-table/badge)](https://www.codefactor.io/repository/github/sajrashid/react-dynamic-json-table) | [![Maintainability Rating](https://sonarcloud.io/api/project_badges/measure?project=sajrashid_React-Dynamic-Json-Table&metric=sqale_rating)](https://sonarcloud.io/dashboard?id=sajrashid_React-Dynamic-Json-Table) | [![NPM](https://nodei.co/npm/react-dj-table.png?compact=true)](https://nodei.co/npm/react-dj-table/) | [![Netlify Status](https://api.netlify.com/api/v1/badges/ad1de4da-ad86-4c8f-a533-732539d451a7/deploy-status)](https://app.netlify.com/sites/react-dj-table/deploys) |
@@ -9,17 +11,20 @@
 * 📋 [Changelog](./CHANGELOG.md)
 * ✨ [Contributing](./contributing.md)
 
-# React Dynamic JSON Table
+## Background
+
 Some tables require lot's of boiler plate code, with changes across the stack if anything is modified, others a just too basic.
 
 This a fully Editable dynamic table, that's also relatively feature rich, easy to configure, supports pagination, sorting and filtering out of the box, that actually tries to handle data intelligently
 
 It's no slouch either, tested with 10K, 100K, 1M rows if you really want to exercise your CPU.
 
 ## Minimal Boiler-Plate Code
+
 Auto column mapping, Configurable options such as identity columns
 
 ### Features
+
 * CRUD
 * ID columns
 * Label Columns
@@ -29,41 +34,56 @@ Auto column mapping, Configurable options such as identity columns
 * and lot's [more](https://react-dj-table.netlify.app/)
 
 ### CSS Agnostic, Doc's and Examples
+
 Tailwind, Syamtic UI React, Bootstrap examples
 
 ### Tests Tests Tests
+
 Code Coverage is growing fast, CI is working. happy day's.. run the tests in the repo
 
 ### Documentation an Examples
-[Doc's](https://react-dj-table.netlify.app/), Code-Sand-Box examples.
 
+[Doc's](https://react-dj-table.netlify.app/), Code-Sand-Box examples.
 
 >Install
+
  ```js
 yarn add react-dj-table
 ```
+
 >Add Import
+
  ```js
 Import Table from 'react-dj-table'
 ```
+
 >Supply Data
+
  ```js
 const data = ... //some json array
 ```
+
 >Add Component
+
  ```html
 <Table json={data}/>
 ```
+
 ### Paging
+
 Pretty standard built in pager.. or roll your own
 
 ### Editing
+
 Fully CRUD - smart(ish) edit built it, validate and revert user changes before you commit them to your data store
 Intuitive buttons, create a record , change the data, watch as it guides the user.
 
 ### Hackable
+
 You got access to the reducers dispatch functions, state TBD (next patch release)
+
 ### Feature Requests
+
 See Github discussions
 
 [Demo](https://react-dj-table.netlify.app/), Code-Sand-Box examples.
@@ -87,4 +107,3 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
 <!-- ALL-CONTRIBUTORS-LIST:END -->
 
 This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!
-

src/components/react-dj-table/index.js

@@ -12,9 +12,28 @@ import Thead from './children/thead'
 
 const Table = (props) => {
     // setup initial state
+    if (props.json === undefined || props.json === null) {
+        throw new Error("props.json is null or undefined");
+    }
+    if (!Array.isArray(props.json)) {
+        throw new Error("JSON must be an array type []");
+    }
+    if (props.json.length < 1) {
+        throw new Error("Json Data length is 0");
+    }
+
+
+
     const options = props.options || {}
     let json = props.json || []
-    const colspan = Object.keys(json[0]).length
+
+
+
+
+    let columns = json.length > 0 ? Object.keys(json[0]) : []
+
+    let colspan = json.length > 0 ? Object.keys(columns).length : 0
+
     const selectedRowCss = options.selectedRowCss || ''
     const sortDirection = 'asc'
     const searchInputCss = options.searchInputCss || ''
@@ -42,12 +61,10 @@ const Table = (props) => {
     const initialState = {
         json: json, jsonCopy: props.json, options: options, pageable: pageable, selectedRow: {}, selectedRowCopy: null, selectedRowCss: selectedRowCss,
         sortDirection: sortDirection, pagerInput: pagerInput, pageSize: pageSize, pageSizeCopy: pageSize, totalPages: totalPages,
-        colspan: colspan, insertId: null, crudBtns: crudBtns, dataChanged: false, inserting: false, userAction: 'NOACTION', creating: false, editing: true, pageNo: pageNo, pagerIcons: pagerIcons, searchString: ''
+        columns: columns, colspan: colspan, insertId: null, crudBtns: crudBtns, dataChanged: false, inserting: false, userAction: 'NOACTION', creating: false, editing: true, pageNo: pageNo, pagerIcons: pagerIcons, searchString: ''
     }
     const [state, dispatch] = useReducer(TableReducer, initialState)
-
     React.useEffect(() => {
-        console.log("props:", props)
         dispatch({ type: ACTIONS.UPDATEPROPS, payload: { updatedProps: props } })
     }, [props])
 
@@ -80,9 +97,14 @@ const Table = (props) => {
                     <tr ><Thead className={cssClasses} state={state} dispatch={dispatch}></Thead></tr>
                 </thead>
                 <tbody>
-                    <Rows className={cssClasses} rowClick={rowClick} state={state} dispatch={dispatch} />
+
+                    {json.length < 1 ? <tr><td></td></tr> :
+                        <Rows className={cssClasses} rowClick={rowClick} state={state} dispatch={dispatch} />
+
+                    }
                 </tbody>
-                {footer &&
+                {
+                    footer &&
                     <tfoot>
                         <tr>
                             <td colSpan={colspan - hiddenColsCount} dangerouslySetInnerHTML={createMarkup(footerHtml)} >
@@ -117,7 +139,7 @@ Table.propTypes = {
 
 Table.defaultProps = {
 
-    json: [],
+    json: [{}],
     options: {
         tableCss: '',
         cellStyles: '',