DataTable

[david-mart]

Description

• DataTable component is a custom table to represent data from RESTful api.
  It is working directly with the API. The only value that has to be provided is an api model endpoint (i.e. project, asset).
• The complete URL is being generated by getRequestUrl helper function from src/utilities/datatable-utilities.js helper file.
• When the component is first loaded, it is creating two actions: fetchDatatableData and fetchDatatableColumns
• fetchDatatableData is getting table rows from the API, while fetchDatatableColumns is just getting static column values from getColumns helper function of datatable-utilities. It is to be replaced with an actual API call when it is implemented.
• After both methods are called, the data is dispatched into a store by DatatableReducer. It is creating new attribute for both rows and columns store according to the name of the data type. Every new datatable reference is going to be populating same state with new attributes, for example:

    state: {
      rows: {
        project: [ ... ],
        asset: [ ... ]
      },
      columns: {
        project: [ ... ],
        asset: [ ... ]
      },
      filters: {},
      errors: []
    };

• Any API errors are being pushed to errors array. Implementation of filters is to be determined
• Table itself is based on Material-UI Table and uses few helper functions from datatable-utilities to generate table columns and rows.
• As soon as corresponding attribute of rows and columns states is available, component is using same dataType property to get data from the store.
• tableStyles property is being used for customizing table styles.
• All elements of the component are covered by unit tests.

Next steps:

• Add filtering and sorting using registered API filter values.
• Add pagination support using API offset and limit filters.
• Add unit test coverage for datatable-actions.js
• Fix table container and body for scrolling
• Stylize table according to designs