xref: /aosp_15_r20/external/perfetto/ui/src/plugins/dev.perfetto.WidgetsPage/table_showcase.ts (revision 6dbdd20afdafa5e3ca9b8809fa73465d530080dc)
1// Copyright (C) 2023 The Android Open Source Project
2//
3// Licensed under the Apache License, Version 2.0 (the "License");
4// you may not use this file except in compliance with the License.
5// You may obtain a copy of the License at
6//
7//      http://www.apache.org/licenses/LICENSE-2.0
8//
9// Unless required by applicable law or agreed to in writing, software
10// distributed under the License is distributed on an "AS IS" BASIS,
11// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12// See the License for the specific language governing permissions and
13// limitations under the License.
14
15import m from 'mithril';
16import {
17  ColumnDescriptor,
18  numberColumn,
19  stringColumn,
20  Table,
21  TableData,
22} from '../../widgets/table';
23
24// This file serves as an example of a table component present in the widgets
25// showcase. Since table is somewhat complicated component that requires some
26// setup spread across several declarations, all the necessary code resides in a
27// separate file (this one) and provides a no-argument wrapper component that
28// can be used in the widgets showcase directly.
29
30interface ProgrammingLanguage {
31  id: number;
32  name: string;
33  year: number;
34}
35
36const languagesList: ProgrammingLanguage[] = [
37  {
38    id: 1,
39    name: 'TypeScript',
40    year: 2012,
41  },
42  {
43    id: 2,
44    name: 'JavaScript',
45    year: 1995,
46  },
47  {
48    id: 3,
49    name: 'Lean',
50    year: 2013,
51  },
52];
53
54const columns: ColumnDescriptor<ProgrammingLanguage>[] = [
55  numberColumn('ID', (x) => x.id),
56  stringColumn('Name', (x) => x.name),
57  numberColumn('Year', (x) => x.year),
58];
59
60export class TableShowcase implements m.ClassComponent {
61  data = new TableData(languagesList);
62
63  view(): m.Child {
64    return m(Table, {
65      data: this.data,
66      columns,
67    });
68  }
69}
70