Did not have cycles for this feature request this milestone.
Moving to August, since in July I am on vacation.

@joaomoreno bounced some ideas off me, but I did not get any further. For now pasting ideas here

/**
 1. use the listview to render a table in which every column has the same width
 2. have the header row be a splitview widget acting as a single point of truth for column sizes and have dynamically genereated CSS which reflects those sizes, such that element rows can adapt to them
 3. think about all widget features: focus, selection, keyboard & mouse, accessibility, themeing
 */
Trees                    TableWidget
|                        |
         ListWidget
|
ListView - engine virtualization
// idea
table.model
table.columns
// API spec
interface Column<T, R> {
  readonly label: string;
  readonly weight: number;
  readonly renderer: IListRenderer<R>;
  project(element:T): R;
}
declare class Table<T> {
  splice(index: number, deleteCount: number, ...insert: T[]): T[];
  get columns(): Column<T, any>[];
  set columns(columns: Column<T, any>[]);
  setSelection(selection: { element: T, column: number }[]): void;
  getSelection(): { element: T, column: number }[];
}
// example
const nameColumn = {
  label: 'Name',
  renderer
  project(el) {
    return el.name;
  }
}
const model = [
  { name: 'fibonacci', type: 'ndarray' },
  { name: 'inxed', type: 'ndarray' },
  { name: 'msg', type: 'ndarray' },
  { name: 'n', type: 'ndarray' },
  { name: 'x', type: 'ndarray' }
];
// rendering
CSS
.table-col[data-col="1"] { width: 100px; }
.table-col[data-col="2"] { width: 150px; }
.table-col[data-col="3"] { width: 200px; }
<div class="list-row">
  <div class="table-row">
    <div class="table-col" data-col="1">CONTENTS</div>
    <div class="table-col" data-col="2"></div>
    <div class="table-col" data-col="3"></div>
  </div>
</div>

Support table widget #99997

Description

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions