Function table

tfjs-vis/src/render/table.ts:48–130

(
    container: Drawable,
    // tslint:disable-next-line:no-any
    data: TableData, opts: {fontSize?: number} = {})

 * @doc {heading: 'Charts', namespace: 'render'}
 */
export function table(
    container: Drawable,
    // tslint:disable-next-line:no-any
    data: TableData, opts: {fontSize?: number} = {}) {
  if (data && data.headers == null) {
    throw new Error('Data to render must have a "headers" property');
  }

  if (data && data.values == null) {
    throw new Error('Data to render must have a "values" property');
  }

  const drawArea = getDrawArea(container);

  const options = Object.assign({}, defaultOpts, opts);

  let table = d3Select(drawArea).select('table.tf-table');

  const tableStyle = css({
    fontSize: options.fontSize || '.875rem',
    width: '100%',
    maxWidth: '64rem',
    marginRight: 'auto',
    marginLeft: 'auto',
  });

  // If a table is not already present on this element add one
  if (table.size() === 0) {
    table = d3Select(drawArea).append('table');

    table.attr('class', ` ${tableStyle} tf-table`);

    table.append('thead').append('tr');
    table.append('tbody');
  }

  if (table.size() !== 1) {
    throw new Error('Error inserting table');
  }

  //
  // Add the reader row
  //
  const headerRowStyle = css({
    fontWeight: '600',
    borderBottomStyle: 'solid',
    borderBottomWidth: '1px',
    borderColor: 'rgba( 0, 0, 0, .2 )',
    textAlign: 'left',
    paddingBottom: '1rem',
    paddingRight: '1rem',
    backgroundColor: '#fff',
  });
  const headers =
      table.select('thead').select('tr').selectAll('th').data(data.headers);
  const headersEnter =
      headers.enter().append('th').attr('class', `${headerRowStyle}`);
  headers.merge(headersEnter).html(d => d);