Elgato_dark/ToolJet
1
0
Fork 0
mirror of https://github.com/ToolJet/ToolJet synced 2026-05-23 00:48:25 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 8

Feature: types for tables (#632)

Browse source
This commit is contained in:
Navaneeth Pk 2021-08-28 21:40:45 +05:30 committed by GitHub
parent 21fa8518ab
commit 15e58c0b26
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 14 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
frontend/src/Editor/Components/Table/Table.jsx
View file

@ -48,6 +48,10 @@ export function Table({
const displaySearchBoxProperty = component.definition.properties.displaySearchBox;
const displaySearchBox = displaySearchBoxProperty ? displaySearchBoxProperty.value : true;
const tableTypeProperty = component.definition.styles.tableType;
let tableType = tableTypeProperty ? tableTypeProperty.value : 'table-bordered';
tableType = tableType === '' ? 'table-bordered' : tableType;
const [loadingState, setLoadingState] = useState(false);
useEffect(() => {
@ -586,7 +590,7 @@ export function Table({
</div>
)}
<div className="table-responsive jet-data-table">
<table {...getTableProps()} className="table table-vcenter table-nowrap table-bordered" style={computedStyles}>
<table {...getTableProps()} className={`table table-vcenter table-nowrap ${tableType}`} style={computedStyles}>
<thead>
{headerGroups.map((headerGroup) => (
<tr {...headerGroup.getHeaderGroupProps()} tabIndex="0" className="tr">

9
frontend/src/Editor/Components/components.js
View file

@ -31,6 +31,13 @@ export const componentTypes = [
},
styles: {
textColor: { type: 'color', displayName: 'Text Color' },
tableType: { type: 'select', displayName: 'Table type', options: [
{ name: 'Bordered', value: '' },
{ name: 'Borderless', value: 'table-borderless' },
{ name: 'Classic', value: 'table-classic' },
{ name: 'Striped', value: 'table-striped' },
{ name: 'Striped & bordered', value: 'table-striped table-bordered' }
] },
},
exposedVariables: {
selectedRow: {},
@ -64,7 +71,7 @@ export const componentTypes = [
},
events: [],
styles: {
textColor: { value: '' },
textColor: { value: '#00' },
},
},
},

1
frontend/src/Editor/Inspector/Components/Table.jsx
View file

@ -503,6 +503,7 @@ class Table extends React.Component {
{renderElement(component, componentMeta, paramUpdated, dataQueries, 'loadingState', 'properties', currentState)}
{renderElement(component, componentMeta, paramUpdated, dataQueries, 'textColor', 'styles', currentState)}
{renderElement(component, componentMeta, paramUpdated, dataQueries, 'tableType', 'styles', currentState)}
</div>
);
}