Data Table

This is a fork of facebook’s fixed-data-table product.

Here’s an example of the configuration:

  {
    type: 'DataTable',
    header: 'Mi titulo',
    data: 
    [
      [
        {foo: 1, bar: 2},
        {foo: 11, bar: 21},
        {foo: 111, bar: 222},
        {foo: 1, bar: 2},
      ]
    ],
    settings: {
      table: {
        rowHeight: 40, 
        width: 800,
        maxHeight: 300,
        headerHeight:40
      },  
      columns: {
        flexGrow: 1,
        width: 150,
      },
      rows: {
        height: 40, 
      }
    },
    overrides: {
      // target table columns with custom attributes
      // use column header name as key
      columns: {
        bar: {
          flexGrow: 9,
          className: 'greenCell'
        },
      },
      // target table rows with custom attributes
      // use row index as key
      rows: {
        1: {
          className: 'yellow'
        }  
      },
      // target individual cells with custom attributes
      // define key using coordinate: headerName_rowIndex 
      cells: {
        foo_1: {
          className: 'red'
        },
      }
    },
  },

Available settings

• hideControls Hide the controls
• hideFilterHeader Hide the filter controls
• settings:
  • settings.table: allows to configure all the properties for a table
  • settings.columns: allows to configure all the properties for columns
  • settings.cells: allows to configure all the properties for cells
  • overrides: allows to override configurations for the cell in the row number used as key.
  • settings.hideControls: Hide row-numbers select in table header..
  • settings.hideFilterHeader: Hide filter box in table header.
• overrides
  • overrides.columns An object keyed to the header title
  • overrides.rows
  • overrides.cells

** DATA ** Data should be in the format given in the example above. The first row of data will be used as headers.