Table Layouts

Table Layouts - Column Headers

Summary

  • The Table Layout supports displaying custom Column Headers

Developers can provide alternative Column headers in a Table Layout.

Find Out More

The Developer Guide to Configuring Column Headers explains more about the 2 ways this can be done in AdapTable

This means that they can set different text for the Header of the Column on a per-Layout basis.

Note

  • This changes the text of the Column's Caption (i.e. in the AG Grid Column Header)
  • It does not change the Column's FriendlyName (which remains the ColumnDef Header value)
Developer Guide

Setting Column Headers

// Provide different Column Headers for name and github_stars columns
const initialState: InitialState = {
 Layout: {
    CurrentLayout: 'Column Headers Layout',
    Layouts: [
    {
      Name: 'Column Headers Layout',
      TableColumns: ['name', 'github_stars', 'license', 'github_watchers', 'language', 'description', 'open_pr_count'],
      ColumnHeaders: {
        github_stars: 'Fans',
        name: 'Framework',
      },
    }
  ]
 },
};
1
Provide Alternative Column Headers

The ColumnHeaders property (of type ColumnStringMap) is an array containing 2 properties:

  • ColumnId - a string (the id of the Column)
  • the caption for the Column (string)
Table Layouts: Column Headers
Fork
  • This example contains a Custom Header Names Layout where 2 column have been renamed:
    • Name is now Project
    • Language is Programming Language
PreviousColumn SortingNextFiltering and Grouping