Concept

Generated by: Normalizer, Projection
Consumed by: Projection

Define the data model stream through all projections. The projection config is generated by normalizing the user config, then being decorated by the projections in the pipeline. Before delivering to renderer, the projection pipeline calls the composeTABLE method to generate the render model.

Projection config consists data and composer callbacks. Projections can decorate either of them.

Design impact

• Normalizer
  • Implementation of normalizer
• Projection
  • API of all projections
  • Implementation of all projections

Sample projection config

{
  // -----------
  //  Data part
  // -----------
  // Data records
  records: [{
    ID: '000',
    Name: 'Moana',
    Gender: 'Female',
    Tribe: 'Polynesian',
  }, {
    ID: '001',
    Name: 'Maui',
    Gender: 'Male',
    Tribe: 'Half God',
  }],

  // Primary key of each record
  primaryKey: (record) => record['ID'],

  // Column configuration
  columns: [{
    // Name of the column
    name: 'Name',

    // Sub columns
    columns: [],
  }],

  // -------------
  // Composer part
  // -------------
  // Callback to create TD models for a field (record X column)
  composeTds: ({ column, record, config }) => ([{
    attributes: { /* <td/> attributes */ },
    content: { /* <td/> content */ },
  }]),

  // Callback to create TH models for a column
  composeThs: ({ column, config }) => ([{
    attributes: { /* <th/> attributes */ },
    content: { /* <th/> content */ },
  }]),

  // Callback to create COL models for a column
  composeCols: ({ column, config }) => ([{
    attributes: { /* <col/> attributes */ },
  }]),

  // Callback to create TR models for a record
  composeTrs: ({ record, config }) => ([{
    attributes: { /* <tr/> attributes */ },
    tds: [ /* <td/> models */ ],
  }]),

  // Callback to create the THEAD models for the grid
  componseThead: ({ config }) => ({
    attributes: { /* <thead/> attributes */ },
    trs: [ /* <tr/> models */ ],
  }),

  // Callback to create TBODY models for a record list
  composeTbodies: ({ config }) => ([{
    attributes: { /* <tbody/> attributes */ },
    trs: [ /* <tr/> models */ ],
  }]),

  // Callback to create TFOOT model for the grid
  composeTfoot: ({ config }) => ({
    attributes: { /* <tfoot/> attributes */ },
    trs: [ /* <tr/> models */ ],
  }),

  // Callback to create COLGROUP models for a column group
  composeColgroups: ({ config }) => ([{
    attributes: { /* <colgroup/> attributes */ },
    cols: [ /* <col/> models */ ],
  }]),

  // Callback to create the CAPTION model for the grid
  composeCaption: ({ config }) => ({
    attributes: { /* <caption/> attributes */ },
    content: { /* <caption/> content */ },
  }),

  // Callback to create the TABLE model the grid
  composeTable: ({ config }) => ({
    attributes: { /* <table/> attributes */ },
    caption: { /* <caption/> model */ },
    colgroups: [ /* <colgroup/> models */],
    thead: { /* <thead/> model */ },
    tbodies: [{ /* <tbody/> models */ }],
    tfoot: { /* <tfoot/> model */ },
  }),
}