FeatureTable widget

Explore in the sandboxView live

This sample demonstrates how to add a FeatureTable widget to your application. The FeatureTable widget allows users to view and sort data and attributes from a FeatureLayer. In this specific example, the table is displayed as a standalone table without any associated map. In addition to creating a standalone table, this sample also makes use of setting the table's initial sort priority for two of its fields. The "Enrollment" field takes highest sort priority followed by the "School name".

It is possible to also add the table with an associated map, please refer to the FeatureTable widget using a map sample.

Use dark colors for code blocksCopy
                                   
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
const featureTable = new FeatureTable({
  layer: featureLayer,
  multiSortEnabled: true,
  visibleElements: {selectionColumn: false}, // hide the selection column since we are not working with a corresponding map
  tableTemplate: { // autocastable to TableTemplate
  // The table template's columnTemplates are used to determine which attributes are shown in the table
    columnTemplates: [ // Array of either FieldColumnTemplates or GroupColumnTemplates
    { // autocastable to FieldColumnTemplate
      type: "field",
      name: "FID",
      label: "ID",
      // This field will not be shown in the table
      visible: false
    },
    {
      type: "field",
      name: "NAME",
      label: "School Name",
      // The table will be sorted by this column
      // in ascending order
      direction: "asc", // This is required for initial sorting
      initialSortPriority: 1 // This columns get priority after Enrollment
    },
    {
      type: "field",
      name: "TOT_ENROLL",
      label: "Enrollment",
      direction: "asc", // This is required for initial sorting
      initialSortPriority: 0 // This column gets the highest sort priority
    },
    ...
  ]
  },
  container: "tableDiv"
});

Known Limitations

For a comprehensive list of limitations, please refer to the widget's API Reference documentation.

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.