feat(table): add striped columns

Author: xidedix

projects/coreui-angular/src/lib/table/table.directive.ts

@@ -11,18 +11,21 @@ export class TableDirective implements OnInit {
   static ngAcceptInputType_hover: BooleanInput;
   static ngAcceptInputType_small: BooleanInput;
   static ngAcceptInputType_striped: BooleanInput;
+  static ngAcceptInputType_stripedColumns: BooleanInput;
 
   /**
    * Set the vertical alignment.
    * @type string
    * @values 'bottom' | 'middle' | 'top'
    */
   @Input() align?: 'bottom' | 'middle' | 'top';
+
   /**
    * Sets the border color of the component to one of CoreUI’s themed colors.
    * @type Colors
    */
   @Input() borderColor?: Colors;
+
   /**
    * Add borders on all sides of the table and cells.
    * @type boolean
@@ -31,10 +34,13 @@ export class TableDirective implements OnInit {
   set bordered(value: boolean) {
     this._bordered = coerceBooleanProperty(value);
   };
+
   get bordered() {
     return this._bordered;
   }
+
   private _bordered = false;
+
   /**
    * Remove borders on all sides of the table and cells.
    * @type boolean
@@ -43,20 +49,25 @@ export class TableDirective implements OnInit {
   set borderless(value: boolean) {
     this._borderless = coerceBooleanProperty(value);
   };
+
   get borderless() {
     return this._borderless;
   }
+
   private _borderless = false;
+
   /**
    * Put the `<caption>` on the top of the table.
    * @values 'top'
    */
   @Input() caption?: 'top';
+
   /**
    * Sets the color context of the component to one of CoreUI’s themed colors.
    * @type Colors
    */
   @Input() color?: Colors;
+
   /**
    * Enable a hover state on table rows within table body.
    * @type boolean
@@ -65,15 +76,19 @@ export class TableDirective implements OnInit {
   set hover(value: boolean) {
     this._hover = coerceBooleanProperty(value);
   };
+
   get hover() {
     return this._hover;
   }
+
   private _hover = false;
+
   /**
    * Make table responsive across all viewports or pick a maximum breakpoint with which to have a responsive table up to.
    * @type: {boolean | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'}
    */
   @Input() responsive?: boolean | Omit<Breakpoints, 'xs'>;
+
   /**
    * Make table more compact by cutting all cell `padding` in half.
    * @type boolean
@@ -82,23 +97,44 @@ export class TableDirective implements OnInit {
   set small(value: boolean) {
     this._small = coerceBooleanProperty(value);
   };
+
   get small() {
     return this._small;
   }
+
   private _small = false;
+
   /**
-   * Add zebra-striping to any table row within the table body`.
+   * Add zebra-striping to any table row within the table body.
    * @type boolean
    */
   @Input()
   set striped(value: boolean) {
     this._striped = coerceBooleanProperty(value);
   };
+
   get striped() {
     return this._striped;
   }
+
   private _striped = false;
 
+  /**
+   * Add zebra-striping to any table column.
+   * @type boolean
+   * @since 4.2.4
+   */
+  @Input()
+  set stripedColumns(value: boolean) {
+    this._stripedColumns = coerceBooleanProperty(value);
+  };
+
+  get stripedColumns() {
+    return this._stripedColumns;
+  }
+
+  private _stripedColumns = false;
+
   constructor(
     private renderer: Renderer2,
     private hostElement: ElementRef
@@ -116,7 +152,8 @@ export class TableDirective implements OnInit {
       [`table-${this.color}`]: !!this.color,
       'table-hover': this.hover,
       'table-sm': this.small,
-      'table-striped': this.striped
+      'table-striped': this.striped,
+      'table-striped-columns': this.stripedColumns
     };
   }