This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong. CKG Edit ====== Table in GUI - create a new ====== {{:tutorial:dev:table-example.png?600|}} **Table:** We will use one of components in Advanced folder. It is Table component. We can find this component in Basic too, but it's better to use Advanced for its "advanced" features such as sorting of columns. It is used like this: <code javascript><Advanced.Table ref="table" showRowSelection={showRowSelection} // If you are able to select row or not uiKey={uiKey} // Special key refering to this table manager={manager} // This is really important. Each table needs its manager because then it will show data you really need to see there forceSearchParameters={forceSearchParameters} // These parameters filter table by default. It is preset filter which is not adjustable by user rowClass={({rowIndex, data}) => { return Utils.Ui.getRowClass(data[rowIndex]); }} // TODO filter={this.getAdvancedFilter()} // There are user adjustable filters - filters are shown bellow filterOpened={filterOpened} // If filter form is shown or not _searchParameters={searchParameters} // TODO actions={actionToAdjustItems} // Actions are connected to showRowSelection. It's a selection table with operation for selected rows buttons={somebuttons}> // Buttons to be in table</code> If we want implement manager and service we can use [[tutorial:dev:crud_agenda|this tutorial]]. **Column:** Now we need to add some columns into our table <code javascript><Advanced.Column property="operationResult.state" //which property will be shown in this column. Refers to database column name header="State" // Text to be shown in the top of column width={75} // Width of column sort // Boolean if user is able to sort table by this parameter face="enum" // How this property will look like in the table. enumClass={OperationStateEnum} // TODO /></code> In same folder we can find column component. You can see its usage README.dm. **Filter** For filter we just use //Form//: <code javascript><Advanced.Filter onSubmit={this.useFilter.bind(this)}> <Basic.AbstractForm ref="filterForm"> <Basic.Row> <Basic.Col lg={ 4 }> <Advanced.Filter.DateTimePicker mode="date" ref="from" placeholder={this.i18n('entity.LongRunningTaskItem.filter.from.placeholder')}/> </Basic.Col> <Basic.Col lg={ 4 }> <Advanced.Filter.DateTimePicker mode="date" ref="till" placeholder={this.i18n('entity.LongRunningTaskItem.filter.till.placeholder')}/> </Basic.Col> <Basic.Col lg={ 4 } className="text-right"> <Advanced.Filter.FilterButtons cancelFilter={this.cancelFilter.bind(this)}/> </Basic.Col> </Basic.Row> <Basic.Row className="last"> <Basic.Col lg={ 4 }> <Advanced.Filter.EnumSelectBox ref="operationState" placeholder={this.i18n('entity.LongRunningTaskItem.filter.state.placeholder')} enum={OperationStateEnum}/> </Basic.Col> <Basic.Col lg={ 4 }> <Advanced.Filter.TextField ref="text" placeholder={this.i18n('entity.LongRunningTaskItem.filter.text.placeholder')}/> </Basic.Col> </Basic.Row> </Basic.AbstractForm> </Advanced.Filter></code> by tomiskar Log In