Add a TableListBox

Thursday 6 August 2020

Here we are going to talk about the TableListBox component. This is a built-in class on the JUCE library which allows us to display a table.

1. In PlaylistComponent.h in private: add

juce::TableListBox tableComponent;

2. In PlaylistComponent.cpp in PlaylistComponent::PlaylistComponent() add:

addAndMakeVisible(tableComponent);

3. In resized() add:

tableComponent.setBounds(0, 0, getWidth(), getHeight());

When you compile and build now you can see a grey bar which is where the table header will go. So how can we specify the header?

4. We can configure the columns by going to PlaylistComponent::PlaylistComponent() in PlaylistComponent.cpp. Add the following code before the addAndMakeVisible:

tableComponent.getHeader().addColumn("Track title", 1, 400);

The 1 is the column ID (in Juce 6 this cannot be 0, so start at 1) and the 400 is the width in pixels.

5. We can add a new column, for example:

tableComponent.getHeader().addColumn("Artist", 2, 400);

On a build and compile you can now see the table starting to take shape.

Note: TableListBox inherits from multiple classes. The term for a class that can behave as multiple classes is polymorphism.