widgets.pbTable.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


    
        With this widget, you can display data from an array in tabular presentation.
        To display the data, define the header properties with a comma-separated list of column headings,
            bind the content to an array of JavaScript objects.
        Then, provide a comma-separated list for the columns keys indicating the attribute to display in each column.
        To get the data from a selected row, bind selected row to a variable.
    
    
        Customize the default look and feel as follows:
        
            Zebra-striping(Default: yes): Apply a Zebra style
                (this style set a different background color on even and odd lines).
            Condensed(Default: no): Display cells without spacing.
            Bordered(Default: no): Display cells with border.
        

    
    
        Styling zebra-striping can be done in the theme.css file to customize all the 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 override your theme to display one specific table, to do this:
        
            In 'CSS Classes' property add the zebra-custom class
            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
        
    
    
        Example of border table:
        
            Set Bordered property at true.
            In 'Classes CSS' property add the following value
            border-custom
            Add the following class in style.css asset.
/** First selector is for header
 *  Second for each row
 **/
.border-custom >  pb-table >
   .table-responsive > .table-bordered
   > * > tr > th,
.border-custom .table-bordered td {
    border: 2px solid #8FB2DD;
}

            Click on preview to check the result