Datas

These are the almost complete Sass selector for Primefaces datas components.


DataTable

This is Sass selector for DataTable component.

Data - DataTable
Data - DataTable
/* DATA - DATATABLE */
.ui-datatable {
  thead {
    tr {
    }
    th {
      &.ui-sortable-column {
      }
      .ui-column-title {
      }
      .ui-sortable-column-icon {
      }
      span {
      }
    }
    .ui-column-filter {
    }
  }
  tbody {
    tr {
      &.ui-datatable-even {
      }
      &.ui-datatable-odd {
      }
      &.ui-state-hover {
      }
      &.ui-state-highlight {
      }

      &.ui-row-editing {
        .ui-editable-column {
          .ui-cell-editor-input {
          }
        }
      }

      &.ui-expanded-row {
        .ui-row-toggler {
        }
        & + .ui-expanded-row-content {
        }
      }
    }
    td {
      &:last-child {
        .ui-row-editor {
          .ui-icon-pencil { }
          .ui-icon-check { }
          .ui-icon-close { }
        }
      }
    }
  }
  .ui-datatable-wrapper {
  }
  .ui-datatable-header {
  }
  .ui-datatable-footer {
  }
  .ui-paginator {
    .ui-paginator-current { }
    .ui-paginator-first {
      .ui-icon { }
    }
    .ui-paginator-prev {
      .ui-icon { }
    }
    .ui-paginator-next {
      .ui-icon { }
    }
    .ui-paginator-last {
      .ui-icon { }
    }
    .ui-paginator-pages {
      .ui-paginator-page { }
    }
    .ui-paginator-rpp-options {
    }
  }
}

PickList

This is Sass selector for PickList component.

Data - PickList
Data - PickList
/* DATA - PICKLIST */
.ui-picklist {
  &.ui-picklist-responsive {
    .ui-picklist-buttons {
      .ui-button {
      }
    }
    .ui-picklist-list-wrapper {
    }
    .ui-picklist-list {
      .ui-picklist-item {
        tr {
          td {
          }
        }
      }
    }
  }
  .ui-picklist-filter-container {
    .ui-picklist-filter {
    }
    .ui-icon {
    }
  }
  .ui-picklist-caption {
  }
}