Themes.DefaultTheme Class
Almost empty skeleton for themes. Extend it to provide custom CSS-classes for table items and icons.
- Every property with suffix
Componentis a path to the component used in theme - Every property with suffix
Msgis a message shown in the table - Every property with suffix
Iconis a CSS-class for font-library used as an icons (used for buttons, carets etc)
Difference from v.2:
- No
mergedProperties - Properties
components,messagesandiconsare removed. Every their key is placed directly in theme and named with suffixComponent,MsgorIcon. - Every property name is converted to the
lowerCamelCase
Item Index
Properties
- allColumnsAreHiddenMsg
- buttonDefault
- buttonLink
- buttonsGroup
- cancelRowButton
- cancelRowButtonLabelMsg
- caretIcon
- cellComponent
- cellContentDisplay
- cellContentDisplayComponent
- cellContentEdit
- cellContentEditComponent
- cellContentSummaryComponent
- cellContentTagName
- cellEditToggleComponent
- changeGroupByField
- clearAllFiltersIcon
- clearAllFiltersMsg
- clearFilterIcon
- clearFilterMsg
- clearGlobalFilterMsg
- collapseAllRows
- collapseAllRowsIcon
- collapseRow
- collapseRowIcon
- columnHiddenIcon
- columnsDropdown
- columnsDropdownButtonWrapper
- columnsDropdownComponent
- columnsDropdownDivider
- columnsDropdownWrapper
- columnsHiddenComponent
- columnsHideAllMsg
- columnsRestoreDefaultsMsg
- columnsShowAllMsg
- columnsTitleMsg
- columnVisibleIcon
- componentsPath
- currentPageNumberMsg
- currentPageSizeSelectWrapper
- dataGroupBySelectComponent
- dataGroupBySelectWrapper
- defaultComponentsPath
- deselectAllRowsIcon
- deselectRowIcon
- editRowButton
- editRowButtonLabelMsg
- expandAllRows
- expandAllRowsIcon
- expandAllToggleComponent
- expandedRow
- expandRow
- expandRowIcon
- expandToggleComponent
- filteringCellInternalWrapper
- footerComponent
- footerSummary
- footerSummaryDefaultPagination
- footerSummaryNumericPagination
- form
- formElementWrapper
- globalFilterComponent
- globalFilterDropdownWrapper
- globalFilterWrapper
- goToFirstPageButtonTextMsg
- goToLastPageButtonTextMsg
- goToNextPageButtonTextMsg
- goToPrevPageButtonTextMsg
- groupByLabelMsg
- groupedHeaderComponent
- groupingCell
- groupingRow
- headerWrapper
- input
- navFirstIcon
- navLastIcon
- navNextIcon
- navPrevIcon
- noDataCell
- noDataComponent
- noDataToShowMsg
- pageSizeSelectComponent
- pageSizeSelectWrapper
- pageSizeWrapper
- paginationBlock
- paginationInternalWrapper
- paginationNumericComponent
- paginationNumericItem
- paginationNumericItemActive
- paginationSimpleComponent
- paginationWrapper
- paginationWrapperDefault
- paginationWrapperNumeric
- rowComponent
- rowExpandComponent
- rowFilteringCellComponent
- rowFilteringComponent
- rowGroupingComponent
- rowGroupToggleComponent
- rowsCountMsg
- rowSelectAllCheckboxComponent
- rowSelectCheckboxComponent
- rowSortingCellComponent
- rowSortingComponent
- saveRowButton
- saveRowButtonLabelMsg
- searchLabelMsg Label for global filter
- searchPlaceholderMsg
- select
- selectAllRowsIcon
- selectComponent
- selectedRow
- selectRowIcon
- sortAscIcon
- sortDescIcon
- sortGroupedPropertyBtn
- summaryComponent
- table
- tableBodyComponent
- tableComponent
- tableFooterComponent
- tableHeaderComponent
- tableSummaryMsg
- tfooterInternalWrapper
- tfooterWrapper
- thead
- theadCell
- theadCellNoFiltering
- theadCellNoSorting
Properties
allColumnsAreHiddenMsg
String
Message shown when all columns are hidden. It's shown inside table body
Default: 'All columns are hidden. Use <strong>columns</strong>-dropdown to show some of them'
cancelRowButtonLabelMsg
String
Default label for button "Cancel" inside the cell-edit-toggle-component
Default: 'Cancel'
changeGroupByField
String
CSS-classes for select inside the data-group-by-select component
Default: 'change-group-by-field'
clearAllFiltersIcon
String
CSS-classes for "Clear all filters" button inside the summary component
Default: ''
clearAllFiltersMsg
String
Label for "Clear all filters"-button in the table summary section. It's used for screen-readers and not "visible" by default
Default: 'Clear all filters'
clearFilterIcon
String
CSS-classes for "Clear filter" button. Used for global filter and filters for each column
Default: ''
clearFilterMsg
String
Label for "Clear filter"-buttons in the table header's cells. It's used for screen-readers and not "visible" by default
Default: 'Clear filter input'
clearGlobalFilterMsg
String
Label for "Clear global filter"-button. It's used for screen-readers and not "visible" by default
Default: 'Clear global filter input'
columnHiddenIcon
String
CSS-classes for icons in the columns-dropdown related to the hidden columns
Default: ''
columnsDropdown
String
CSS-classes for wrapper over list inside columns-dropdown component
Default: ''
columnsDropdownDivider
String
CSS-classes for divider for list inside columns-dropdown components. Divider is placed before single-column items by default
Default: ''
columnsDropdownWrapper
String
CSS-classes for wrapper used inside columns-dropdown component
Default: ''
columnsHideAllMsg
String
Label for button to hide all table columns (under columns dropdown)
Default: 'Hide All'
columnsRestoreDefaultsMsg
String
Label for button to restore default visibility for table columns (under columns dropdown)
Default: 'Restore Defaults'
columnsShowAllMsg
String
Label for button to show all table columns (under columns dropdown)
Default: 'Show All'
columnVisibleIcon
String
CSS-classes for icons in the columns-dropdown related to the visible columns
Default: ''
componentsPath
String
Path to theme's components. It's used in the child-themes
Default: 'models-table/'
currentPageNumberMsg
String
Label for dropdown with page numbers. Used in both numeric and simple pagination
Default: 'Page:'
currentPageSizeSelectWrapper
String
Wrapper for select-tag in the current-page-number-select component
Default: ''
dataGroupBySelectWrapper
String
CSS-classes for wrapper inside data-group-by-select component
Default: ''
editRowButtonLabelMsg
String
Default label for button "Edit" inside the cell-edit-toggle-component
Default: 'Edit'
goToFirstPageButtonTextMsg
String
Label for "First"-page in the numeric pagination. It's used for screen-readers and not "visible" by default
Default: 'Go to first page'
goToLastPageButtonTextMsg
String
Label for "Last"-page in the numeric pagination. It's used for screen-readers and not "visible" by default
Default: 'Go to last page'
goToNextPageButtonTextMsg
String
Label for "Next"-page in the numeric pagination. It's used for screen-readers and not "visible" by default
Default: 'Go to next page'
goToPrevPageButtonTextMsg
String
Label for "Previous"-page in the numeric pagination. It's used for screen-readers and not "visible" by default
Default: 'Go to previous page'
headerWrapper
String
CSS-classes for div-wrapper over components global-filter, data-group-by-select and columns-dropdown
Default: ''
noDataToShowMsg
String
Message shown when there are not data to display in the table. It's shown inside table body in cases when initial data is empty or when all records are filtered out
Default: 'No records to show'
pageSizeWrapper
String
CSS-classes for wrapper over "Page size"-block in the footer component
Default: ''
paginationInternalWrapper
String
CSS-classes for buttons-wrapper in the pagination-simple and pagination-numeric components
Default: ''
paginationNumericItemActive
String
CSS-classes for active item in the pagination-numeric component
Default: ''
paginationWrapper
String
CSS-classes for pagination-simple and pagination-numeric components
Default: 'table-nav'
saveRowButtonLabelMsg
String
Default label for button "Save" inside the cell-edit-toggle-component
Default: 'Save'
sortAscIcon
String
CSS-classes for icons used to show that some "list" is sorted "ASC". It's used for data-group-by-select and row-sorting-cell
Default: ''
sortDescIcon
String
CSS-classes for icons used to show that some "list" is sorted "DESC". It's used for data-group-by-select and row-sorting-cell
Default: ''
sortGroupedPropertyBtn
String
CSS-classes for "sort asc/desc" button inside the data-group-by-select component
Default: ''
tableSummaryMsg
String
Message shown in the table summary. It's used with three options:
- First row's index
- Last row's index
- Overall rows count
Default: 'Show %@ - %@ of %@'
theadCellNoFiltering
String
CSS-classes used for thead-cells with columns filters. This class is used only if columns is not filterable
Default: 'table-header-no-filtering'
theadCellNoSorting
String
CSS-classes used for thead-cells with columns titles. This class is used only if columns is not sortable
Default: 'table-header-no-sorting'