widgets.pbDataTable.help.html Maven / Gradle / Ivy

Go to download
Show more of this group Show more artifacts with this name
Show all versions of ui-designer-artifact-builder-generator-angularjs Show documentation
This module is a generator on AngularJS for Artifact Builder
There is a newer version: 1.0.9
Show newest version

    
        An extended table widget that provides column sorting, filtering, and paging in addition to the
            standard table widget capabilities.
        
Set the Data source to Bonita API to populate the data table with records from a Bonita REST
            API.
        
            You do not need to specify paging parameters (such as ?p=0&c=10), because the data table handles paging automatically when you use a Bonita API data source.
        
        You can use the API request parameters property to pass additional parameters to the
            request. Supported parameters are described in the REST API Overview documentation page and in the REST API documentation for the relevant resources.
        Alternatively, you can set the Data source to Variable and use a variable definition to point to
            the table content.
    
    
        The Sortable columns property enables to list the columns which allow a sorted search.
        
        Each element of this property has to match an element of the Columns key property to figure out
            which table column can be sorted upon.
        The sort is backend when datasource is Bonita API. It is frontend, otherwise.
    
    
        You can provide a filter for users to update the displayed table to show only the rows that match
            the filter. To do this :
        
            Add a widget to the page where the user will specify the filter. This can be an Input widget
                for free-form text, or a Select widget to choose from a preset list.
            
            Create a filter variable in the variable panel. If you are using an Input widget, this
                variable has no value.
            
            Bind the filter variable to the widget.
            Bind the filter variable to the Data table widget Filter property.
        
        
            When the table is displayed, each time the user updates the filter, the table display is
            updated accordingly. The filter is applied to the table rows that are currently displayed.
        
    
    
        Customize the default look and feel as follows:
        
            Zebra-striping(Defaults: yes): Apply a Zebra style (this style set a different background color on even and odd lines).
            Condensed(Defaults: no): Display cells without spacing.
            Bordered(Defaults: no): Display cells with border.
        
    
    
        Styling zebra-striping can be done in the theme.css file to customize all data-tables.
         You need to use this following css selector in your theme.css file:
        .table-striped > tbody
  > tr:nth-of-type(odd) {
    background-color: chartreuse;
}

.table-striped > tbody
  > tr:nth-of-type(even) {
    background-color: black;
}
 
        In some case, you want to override your theme to display one data-table with specific line color, to do this:
        
            In 'CSS Classes' property add the following class zebra-custom
            Add the following class in style.css asset.
            .zebra-custom .table-striped
 > tbody > tr:nth-of-type(odd){
    background-color: #8FB2DD;
}

.zebra-custom .table-striped
 > tbody > tr:nth-of-type(even) {
    background-color:#994B42;
}

            Click on preview, select an app with a theme and check the result