Skip to content

Data Table

A data table displays labeled columns and rows used to present numbers, text, or images.

Anatomy

Data table rows consist of a collection of columns, each containing an image or up to two lines of text or numbers. In the case of a header row, only one line of text is allowed.

A data table view consists of a horizontally and vertically scrollable list of data table rows. The first row is a sticky header containing the labels for the columns. Optionally, the first column can be a sticky column.

Data Table View Anatomy

Usage

A data table row is used to display info about an item and should lead to more information when the user clicks the row. A data table view is used to display these rows.

Construction

A data table view can be created by the constructor in code:

DataTableView dataTable = new DataTableView(getContext());

A data table view can also be created by declaring a DataTableView element in XML like this:

<com.sap.cloud.mobile.fiori.object.DataTableView
        android:id="@+id/dataTable"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
</com.sap.cloud.mobile.fiori.object.DataTableView>

Populating the Table

To populate the data table view with data, create an adapter extending DataTableProvider and add it to the DataTableView. Within this class, override onBindViewHolder(DataTableRowViewHolder, int) with the implementation for each DataTableRow, and override getItemCount() with the number of rows in the table. For example:

DataTableAdapter adapter = new DataTableAdapter();
dataTable.setAdapter(adapter);

public class DataTableAdapter extends DataTableView.DataTableProvider {
    public DataTableAdapter() {}

    @Override
    public void onBindViewHolder(@NonNull DataTableRowViewHolder holder, int pos) {
        DataTableRow row = (DataTableRow)holder.itemView;
        row.setTextAlignment(DataTableRow.ALIGN_START,
                DataTableRow.ALIGN_START,
                DataTableRow.ALIGN_START,
                DataTableRow.ALIGN_END,
                DataTableRow.ALIGN_START);
        row.setColumnWidths(110, 150, 400, 100, 400);
        if (pos == 0) {
            row.setText(0, "");
            row.setText(1, "Work Number");
            row.setText(2, "Headline");
            row.setText(3, "Price (USD)");
            row.setText(4, "Description");
        } else {
            row.setLines(2);
            row.setImage(0, getResources().getDrawable(R.drawable.image));
            row.setText(1, "Work number info");
            row.setText(2, "Headline info");
            row.setText(3, "Price info");
            row.setText(4, "Description info");
        }
    }

    @Override
    public int getItemCount() {
        return 25;
    }
}

Customization

Text/Image

The content for each column can be specified using setText(int, CharSequence) and setImage(int, Drawable). If both text and a non-null image are set, the image will be displayed rather than the text.

row.setImage(0, getResources().getDrawable(R.drawable.image)); // first column is an image
row.setText(1, "Work Number"); // second column is text
row.setText(2, "10007611"); // third column is text

Sticky Column

The sticky column keeps the first column on the screen displayed as the screen is scrolled. By default, the sticky column is not enabled.

dataTable.setStickyMode(true);

Data Table Sticky Column

Text Alignment

The text alignment for each column can be customized by assigning ALIGN_START or ALIGN_END in setTextAlignment(int...). Each argument corresponds to the column of that index. If the alignment for a column has not been specified, ALIGN_START is used by default.

row.setTextAlignment(DataTableRow.ALIGN_START, // first column aligned with start
    DataTableRow.ALIGN_END, // second column aligned with end
    DataTableRow.ALIGN_START); // third and any other columns aligned with start

Column Width

The width for each column can be customized by assigning a dp value in setColumnWidths(float...). Each argument corresponds to the column of that index.

row.setColumnWidths(110, 150, 400, 100, 400);

By default, columns have a maximum width of half of the screen's width. The sticky column has a maximum width of a third of the screen's width. These maximum widths will adjust accordingly when the screen is rotated 90 degrees. The maximum widths can be customized:

row.setMaxColumnWidth(450);
row.setMaxStickyColumnWidth(300);

Click Listener

The Data Table View accepts a FioriItemClickListener that defines click behavior for each item.

FioriItemClickListener listener = new FioriItemClickListener() {
    @Override
    public void onClick(@NonNull View view, int position) {
        if (position == 0) {
            Toast.makeText(view.getContext(), "Header has been clicked", Toast.LENGTH_SHORT).show();
        } else {
            Toast.makeText(view.getContext(), "Row " + position + " has been clicked", Toast.LENGTH_SHORT).show();
            Context context = view.getContext();
            Intent intent = new Intent(context, ObjectHeaderActivity.class);
            context.startActivity(intent);
        }
    }

    @Override
    public void onLongClick(@NonNull View view, int position) {

    }
};
dataTable.setClickListener(listener);

Last update: June 22, 2021