EuiTableOfRecords component #250

`EuiTableOfRecords` is a high level component that aims to easy the way one creates a table of... (wait for it....) records!!! What is a record? Think of a record in a data store - typically it represents an entity with a very clear schema. It is something that can be presented in a tabular form. The goal of this high level component is to make the consumer not think about design. Instead, the consumer only need to define the functional requirements of the table (features), the data, and the type of interaction the user should have with the shown records. This high level component is as stateless as it needs to be. Meaning, all the management of the data (where it's coming from), record selection and loading pages... all of these are expected to be managed externally to this component. Typically one would use a container component to wrap around this table that will either manage this state internally to that component, or use other state stores such as Redux. This initial commit includes: - A first implementation of the `EuiTableOfRecords` - Support for pagination - Support for record selection - Support for custom rendering of the record data This commit also comes with a dedicated documentation section in the EUI doc site.

General Services: - introduced a `utils` directory for general utilities (which are not really services) - introduced `EuiPropTypes` - our own extension to `PropTypes` - introduced `EuiPropTypes.is` - a type validator that expect an exact match on a specific value - introduced `ASC` and `DESC` as sort direction values and `SortDirectionType` react type for it - introduced `PropertySortType` - a react type for an object representing meta data for property sort (key and direction) Features: - Selection is now managed internally in the table component itself. Selection can be seen as an internal UI facet of the component rather than a general "date" facet. It is one less thing for the consumer to manage, yet they can still register an `onSelectionChanged` callback method and be aware and react to selection changes (so it's a win-win) - introduced the notion of "computed columns". Until now we only had "data and "actions" column types. Now, with "computed" column, one can define a column that is not associated with any specific key and provide a renderer that renders the record's column content derived from the record itself. Not that computed column are not sortable. Docs Examples: - `Single Record Action` - shows a table where the rows have a single action associated with them. - `Multiple Record Actions` - shows a table where the rows have multiple actions associated with them. - `Implicit Record Action` - shows how one can utilize "computed" columns to add custom controls to none action columns

General Services: - Introduced `SortDirection` - a constant that holds the direction constants + a few helper functions around directions - introduced `Comparators` - a start of a set of comparators to be used for sorting values - introduced `EuiPropTypes.is` - a type validator that expect an exact match on a specific value - introduced `ASC` and `DESC` as sort direction values and `SortDirectionType` react type for it - introduced `PropertySortType` - a react type for an object representing meta data for property sort (key and direction) Features & Fixes: - Added an option to specify a selectable message - can be used to deliver a reason for why a record is not selectable (shown as the title/tooltip of the checkbox) - Fix: Paginating (changing page size or navigating through the pages) and Sorting will now clear selection. Docs Examples: - Added a `Sorting` section + an example of how you set up column sorting - Enhanced the `Selection` example to also provide a message explaining why a selection is disabled (shown as a title on the checkbox)

Previously the config enabled you to define multiple separate callbacks for pagination and sorting. The problem with that approach is that it still left too much for the user to manage. Specifically, certain behaviour that we'd like to promote and control from the `EuiTableOfRecords` component, was left to the user to implement - For example, one of the design patterns decision we had is to reset pagination when sorting changes. Unfortunately this cannot be done from within the component with multiple separate callbacks. For this reason, the config and model props changes quite a bit. Now there's a clear separation between the data itself and the criteria that describes and loaded the data. The new model structure looks like this: ```js { data: { records: [], // list of records totalRecordCount: number }, criteria?: { page?: { index: number, size: number }, sort?: { key: string, direction: 'asc' | 'desc' } } } ``` In addition, there now only a single callback that asks the consumer to update the data - `onModelCriteriaChange`. This enables the table component to decide how the criteria change based on the interaction of the user - in other words, the table now controls its own behaviour. Nice side effects: - Pagination is enabled automatically when the `page` criteria is provided in the model (no need to explicitly configure pagination in the "config") - Sorting is enabled automatically when one of the columns is marked as `sortable` (no need to explicitly configure sorting` in the "config") - Rendering a table that shows all data (without pagination) is a simple as passing in the data - that is `model.data` (no need to pass in additional single page meta data as before). - No more need for the `Page` construct Examples: - added a proper intro to the examples page - explaining the `config` and the `model` concepts. Also providing high level explanation of what exactly is a "High Level Component" (as it's relatively new to EUI). - Updated all the examples based on the new model

- moved `value_renderer` module to live under `components` (to keep all renderers centralized and avoid circular dep.) - removed `.isRequired` for `model.criteria.page` prop - removed `.isRequired` for `name` property of an actions column - added proper error messages if the `onDataCriteriaChange` is not defined yet pagination and/or sorting is enabled - added proper error messages if a column data type is unknown - fixed some code formatting issues

- fixed accessibility for "hidden" record actions. Now using `opacity: 0` instead of `visibility: hidden`. - updated the docs... well... reduced the docs to 2 examples (for easier digestion during PR review process)

* Add ability to toggle on and off different features of the table. * Rename ValueRenderers to EuiValueRenderers. * Add 'Column render types' example. * Hide footer when missing necessary config. Rename key prop to id. * Refer to dataType instead of renderType. * Rename column.id -> column.field.

- better/cleaner support undefined values in date & number value renderers - better error reporting by the table in case it's misconfigured - ensure unique component `key` creation within the table - introduced the `Random` service - cleans up the text (would be great if we later take this and build randomized testing around it)

- cleaned up imports - rely on the shallow merging of `setState` when providing a callback - use `.filter(...)` when appropriate (instead of `.reduce(...)`

- removed dependency on `date-fns` - added `moment.js` as peer & dev dependency - reimplemented the `date` value renderer using momentjs - added support for `calendar`, `calendarDate` and `calendarDateTime` formats

- `model.data.totalRecordCount` is no longer required (defaults back to the length of `model.data.records`) - renamed `renderFooter` to `renderPaginationBar`

- since the default props docs don't support rich props hierarchy, we construct the docgen info ourselves. - changes the styling of the props docs - introduced a special `_euiObjectType` field in docgenInfo "mark" the documented component as a "type" rather than a react component - added internal links between the different types

- also renamed `propsInfo.js` to `props_info.js`

…ring and cleanup: - Now we properly handle focus/blur event delegation among the table, expanded record actions and collapsed actions - collapsed action is now rendered as a single custom action - code split: created dedicated components for `ExpandedRecordActions`, `CollapsedRecordActions`, `DefaultRecordAction`, `CustomRecordAction`, and `PaginationBar`. - Snapshot tests were added to all the new components - Simplified the action configuration - it's no more needed to default an action type ("custom" is inferred by the `render` method), also, the button and icon actions are now one (they're distinguished by the now optional `type` field) - Updated the `props_info.js` docs to reflect all these changes - props docs infrastructure now support code markup for descriptions and comments on default values. - `EuiPopover` now support passing a `popoverRef` prop to get a handle to the popover element. - Cleaned up and simplified the table of records examples

…n EuiContextMenuPanel. (#3)

- context menu is currently experiencing difficulties with focusable elements as items. So util this is fixed (in #336) we should not encourage using those. - while at it, renamed the full featured example js file to `full_featured.js` (used to be something I already managed to forget)

* Delete Link and Health value renderers. Convert Date value renderer into the formatDate service. * Convert defaultRenderer tests to use snapshots so they're testing interface instead of implementation. Convert file name to snake case. * Inline default renderer test values instead of using snapshots. * Delete BooleanIon renderer. Convert BooleanText renderer into formatBoolean service. * Convert Number renderer into formatNumber service. * Convert Text renderer into formatText service. * Convert Default renderer into formatAuto service. Delete EuiValueRenderers module. * Duck-type formatNumber arguments. * Use isString instead of typeof. * Change references from 'default' to 'auto'.

- removed redundant comments - aligned how we name keys across the boar (consistent key value pattern)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

EuiTableOfRecords component #250

EuiTableOfRecords component #250

Commits on Jan 29, 2018