ywana-core8 0.0.518 → 0.0.519

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ywana-core8",
-  "version": "0.0.518",
+  "version": "0.0.519",
   "description": "ywana-core8",
   "homepage": "https://ywana.github.io/workspace",
   "author": "Ernesto Roldan Garcia",

package/src/css/html.css

@@ -42,4 +42,16 @@ td.actions {
  */
  body > iframe[style*="2147483647"]:not([id="webpack-dev-server-client-overlay"]) {
   display: none;
+}
+
+.empty-message {
+  width: 100%;
+  height: 100%;
+  min-height: 10rem;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  color: var(--text-color-lighter)
 }

package/src/html/table.js

@@ -110,10 +110,19 @@ export const DataTable = (props) => {
                     </tr>
                 </thead>
                 <tbody>
-                    {
+                    {rows.length > 0 ?
                         multiSort(rows, sortDir).map(row => (
                             <DataTableRow key={row.id} row={row} columns={columns} onSelect={select} onDrop={moveRow} editable={editable} expanded={expanded} />
-                        ))
+                        )) : (
+                            <tr>
+                                <td colSpan={columns.length+1}>
+                                    <div className='empty-message'>
+                                        <Icon icon="search_off" />
+                                        <Text>No Result Found</Text>
+                                    </div>
+                                </td>
+                            </tr>
+                        )
                     }
                 </tbody>
             </table>
@@ -194,7 +203,7 @@ const EntityCellViewer = ({ id, item, value }) => {
 
     const fields = Object.values(item).filter(field => field.column === true)
     const locale = window.navigator.userLanguage || window.navigator.language;
-    
+
     return fields.map(field => {
 
         let text = value[field.id]

package/src/html/table.test.js

@@ -35,7 +35,7 @@ export const TableTest = (prop) => {
         setRows(next)
     }
 
-    const table = {
+    const table1 = {
         className: "xxx",
         editable: true,
         columns : [
@@ -49,9 +49,23 @@ export const TableTest = (prop) => {
         rows
     } 
 
+    const table2 = {
+        className: "xxx",
+        editable: true,
+        columns : [
+            { id: "checked", onChange: check },
+            { id: "name", label: "Name", type: "String", onChange: editCell },
+            { id: "name", label: "Name", type: "String", sortable: true },
+            { id: "thumb", label: "Thumb", type: "String", format: FORMATS.IMG },
+            { id: "color", label: "Color", type: "String", format: FORMATS.COLOR },
+            { id: "date", label: "Date", type: "String", format: FORMATS.DATE },
+        ],
+        rows: []
+    } 
+
     return (
         <div style={{ maxHeight: "20rem", overflow: "hidden", border: "solid 1px red", margin: "2rem" }}>
-           <DataTable {...table} onRowSelection={select} onCheckAll={checkAll}/>
+           <DataTable {...table2} onRowSelection={select} onCheckAll={checkAll}/>
         </div>
     )
 }