Components in Ember FW Table

There are several components that have been implemented for you by Ember-FW-Table, which will be a great use to you in developing the Informatics Apps. If you need a reminder about what a component is, see our discussion in our Conceptual Introduction, as well as Ember Guides on Components. Most of the defined components, of course, revolve around tables of various kinds for the apps, either being a component for a piece of a table, or a full table. The two most important components from this package have been more fully discussed under concepts, so we will not touch on them here. A couple of the components are still used quite frequently, but the minimal API documentation was enough to describe their use and function. They are listed under "External Components." A few components are exclusively internal to the package itself, and so these have merely been linked for you in "Internal Components".

External Components

The most commonly used components from this app are FwTableSortable, which is spoken about in the Base Table larger concept, and FwPaginationWrapper, which is spoken about in the Paginated Table larger concept. Besides these two, there are two more full components which are available for your use from Ember FW Table. They are:

  • FwDeleteModal is a helpful component, which internally uses the FwFullscreenModal component and confirm-choice built-in modal to specifically apply it to the use case of deleting a model. It makes it very simple to call a delete modal, but is very inflexible, so can only be used for a delete modal (not even an archive modal). It is very useful for what it is designed for though.
  • FwTableResort is a helpful component that allows you to do simple sorting. It handles all the clientside logic for dragging and dropping items and updating a defined order property on the models. All that is left for you to do after this is call save. This component is preferable to the SortableGroup component from ember-sortable (which it extends) because it does most of the work for you.

There are also a few subsets of components that are defined for your convenience to be used with the FwTableSortable in the columns array. Below follows a description of those.

Cell Components

Cell Components are components that are designed to be rendered in a single cell of a table, and are added to the cellComponent property of the columns array. For information on how cellComponent works, click here. Most of the cell components that are defined by Ember FW Table are available to be used, but also have a more simple util which either uses the cell component directly, or is an alternative and easier way of accomplishing the same function. If there is a util available, that is probably preferable, but here are all the cell components defined:

  • The FwRowToggle and FwRowToggleIndex components creates a toggle column for you. The FwCellActions component creates an action column for you. These components are used by the Base Cells util, click here to see description about that.
  • The FwCellBoolean and FwCellNullable are designed to display booleans or nullable properties properly. But using the Format Util is arguably superior, click here for information on that.
  • FwCellPermissionIcon is the only component which does not have an accompanying utility. This is used on the Permissions page to properly

Column Components

There are two components which are used to override the title component of the table in order to get it to work with FwPaginationWrapper in that there will be a spinning icon whenever there is an active network request used for loading. These should be put in the component attribute of the column rather than cellComponent. They are:

  • The FwColumnSortable component, which just displays the regular column title along with a spinner if the network request is loading in the heading of the column.
  • The FwColumnTitle component extends FwColumnSortable, but it also adds the additional feature of truncating the title with an ellipsis if it is too long.

Internal Components

There are a few components completely internal to Ember FW Table, which are designed to help with the expanded row feature of the FwTableSortable component. It is not important that you are able to distinguish each of these components, as they will never be directly called by you in an app. They are merely linked here so they can be found through the search if needed: FwExpandableRow, FwTableExpandedRow, and FwTableExpandedRows.