diff --git a/frontend/src/Editor/Components/Table.jsx b/frontend/src/Editor/Components/Table.jsx index 8a9b181884..3c4608355b 100644 --- a/frontend/src/Editor/Components/Table.jsx +++ b/frontend/src/Editor/Components/Table.jsx @@ -1,89 +1,168 @@ -import React from 'react'; +import React, { useMemo, useState, useEffect } from "react"; +import { useTable, useFilters } from "react-table"; import { resolve, findProp } from '@/_helpers/utils'; import Skeleton from 'react-loading-skeleton'; -export const Table = function Table({ id, component, onComponentClick, currentState, onEvent }) { +export function Table({ id, component, onComponentClick, currentState, onEvent }) { + + const backgroundColor = component.definition.styles.backgroundColor.value; + const color = component.definition.styles.textColor.value; + const actions = component.definition.properties.actions || { value: []}; + + let loadingState = false; + const loadingStateProperty = component.definition.properties.loadingState; + if(loadingStateProperty && currentState) { + loadingState = resolve(loadingStateProperty.value, currentState); + } + + const [filterInput, setFilterInput] = useState(""); + + const handleFilterChange = e => { + const value = e.target.value || undefined; + setFilter("name", value); + setFilterInput(value); + }; - const backgroundColor = component.definition.styles.backgroundColor.value; - const color = component.definition.styles.textColor.value; - const columns = component.definition.properties.columns.value; - const actions = component.definition.properties.actions || { value: []}; + const columnData = component.definition.properties.columns.value.map((column) => { + return { Header: column.name, accessor: column.key || column.name } + }) - const loadingStateProperty = component.definition.properties.loadingState; - - let loadingState = false; - if(loadingStateProperty && currentState) { - loadingState = resolve(loadingStateProperty.value, currentState); - } - - console.log('currentState', currentState); - - let data = [] + let tableData = [] if(currentState) { - data = resolve(component.definition.properties.data.value, currentState, []); - console.log('resolved param', data); - } - - function findColumnValue(row, column) { - if(column.key) { - return findProp(row, column.key); - } else { - return findProp(row, column.name); - } + tableData = resolve(component.definition.properties.data.value, currentState, []); + console.log('resolved param', tableData); } - // Quick fix, need to remove later - data = data ? data : []; + tableData = tableData ? tableData : []; - const computedStyles = { + + const columns = useMemo( + () => + [ + ...columnData, + { + id: 'actions', + Header: 'Actions', + accessor: 'edit', + Cell: (cell) => { + return actions.value.map((action) => + + ) + } + } + ], + [] + ); + + const data = useMemo( + () => + tableData, + [tableData.length] + ); + + const computedStyles = { backgroundColor, - color + color, + width: '700px' } - return ( -
onComponentClick(id, component) }> - - - - {columns.map((column) => )} - {actions.value.length > 0 && - - } - - - - + const { + getTableProps, + getTableBodyProps, + headerGroups, + rows, + prepareRow, + setFilter + } = useTable( { + columns, + data + }, + useFilters, + ); - {data.map((row => - { e.stopPropagation(); onEvent('onRowClicked', { component, data: row }); }}> - {columns.map((column) => )} - - {actions.value.length > 0 && - - } - - ))} - - {/*
- Records 1-10 of 242 -
*/} -
{column.name}Actions
{findColumnValue(row, column)} - {actions.value.map((action) => ( - - ))} -
- {loadingState && + return ( +
onComponentClick(id, component) }> +
+
+
+ Show +
+ +
+ entries +
+
+ Search: +
+ +
+
+
+
+
+ + + {headerGroups.map(headerGroup => ( + + {headerGroup.headers.map(column => ( + + ))} + + ))} + + + {rows.map((row, i) => { + prepareRow(row); + return ( + { e.stopPropagation(); onEvent('onRowClicked', { component, data: row.original }); }}> + {row.cells.map(cell => { + return ; + })} + + ); + })} + +
{column.render("Header")}
{cell.render("Cell")}
+ {loadingState &&
} -
- ); -}; +
+
+

Showing 1 to 8 of 16 entries

+ +
+
+ ); + + +} \ No newline at end of file diff --git a/frontend/src/Editor/Components/Tables.jsx b/frontend/src/Editor/Components/Tables.jsx new file mode 100644 index 0000000000..8a9b181884 --- /dev/null +++ b/frontend/src/Editor/Components/Tables.jsx @@ -0,0 +1,89 @@ +import React from 'react'; +import { resolve, findProp } from '@/_helpers/utils'; +import Skeleton from 'react-loading-skeleton'; + +export const Table = function Table({ id, component, onComponentClick, currentState, onEvent }) { + + const backgroundColor = component.definition.styles.backgroundColor.value; + const color = component.definition.styles.textColor.value; + const columns = component.definition.properties.columns.value; + const actions = component.definition.properties.actions || { value: []}; + + const loadingStateProperty = component.definition.properties.loadingState; + + let loadingState = false; + if(loadingStateProperty && currentState) { + loadingState = resolve(loadingStateProperty.value, currentState); + } + + console.log('currentState', currentState); + + let data = [] + if(currentState) { + data = resolve(component.definition.properties.data.value, currentState, []); + console.log('resolved param', data); + } + + function findColumnValue(row, column) { + if(column.key) { + return findProp(row, column.key); + } else { + return findProp(row, column.name); + } + } + + // Quick fix, need to remove later + data = data ? data : []; + + const computedStyles = { + backgroundColor, + color + } + + return ( +
onComponentClick(id, component) }> + + + + {columns.map((column) => )} + {actions.value.length > 0 && + + } + + + + + + {data.map((row => + { e.stopPropagation(); onEvent('onRowClicked', { component, data: row }); }}> + {columns.map((column) => )} + + {actions.value.length > 0 && + + } + + ))} + + {/*
+ Records 1-10 of 242 +
*/} +
{column.name}Actions
{findColumnValue(row, column)} + {actions.value.map((action) => ( + + ))} +
+ + {loadingState && +
+ +
+ } +
+ ); +}; diff --git a/frontend/src/Editor/Components/components.js b/frontend/src/Editor/Components/components.js index 5934db0764..a4a42867ac 100644 --- a/frontend/src/Editor/Components/components.js +++ b/frontend/src/Editor/Components/components.js @@ -51,7 +51,6 @@ export const componentTypes = [ 'onRowClicked' ], styles: { - backgroundColor: { type: 'color'}, textColor: { type: 'color'} }, definition: { @@ -73,7 +72,6 @@ export const componentTypes = [ } }, styles: { - backgroundColor: { value: '' }, textColor: { value: '' } } }