~~Title: Table Container PG~~
{{page>index}}
----
===== Table Container =====

{{ :container_table_tree.png }}{{ :container_table.png }}

A table is like a box but with 2 dimensions. You have the same kind of APIs as
with boxes. An item inside the table can span multiple columns and rows, and
even overlap with other items (and it can then be raised or lowered
accordingly to adjust stacking if there is overlap).

=== Table of Contents ===

  * [[/develop/legacy/program_guide/containers/table#Creating_a_Table|Creating a Table]]
  * [[/develop/legacy/program_guide/containers/table#Adding_Items_to_the_Table|Adding Items to the Table]]
  * [[/develop/legacy/program_guide/containers/table#Managing_the_Items|Managing the Items]]
  * [[/develop/legacy/program_guide/containers/table#Clearing_the_Table|Clearing the Table]]

=== Related Info ===

  * [[https://build.enlightenment.org/job/nightly_elm_gcc_x86_64/lastSuccessfulBuild/artifact/doc/html/group__Table.html|Table Container API]]

^Table Examples^^
|//**__[[https://build.enlightenment.org/job/nightly_elm_gcc_x86_64/lastSuccessfulBuild/artifact/doc/html/tutorial_table_01.html|A First Table Example ]]__**//| //**__[[https://build.enlightenment.org/job/nightly_elm_gcc_x86_64/lastSuccessfulBuild/artifact/doc/html/tutorial_table_02.html|A Second Table Example ]]__**//|

===== Creating a Table =====

To create a table, use the ''elm_table_add()'' function:

<code c>
Evas_Object *table = elm_table_add(parent);
</code>

==== Adding Items to the Table ====

Items are added to the table with the ''elm_table_pack()'' function. This function
takes as parameters the table, the item to add to the table, and the position
where to add the item: column, row, and the size of the item in number of rows
and columns (colspan and rowspan). If we want to create an icon that takes 3
columns and rows and a button that only takes 1 row and column, the code will
look like this:

<code c>
ic = elm_icon_add(table);
elm_image_file_set(ic, "icon.png", NULL);
evas_object_show(ic);
elm_table_pack(table, ic, 0, 0, 3, 3);

btn = elm_button_add(table);
elm_object_text_set(btn, "Click me i'm famous");
evas_object_show(btn);
elm_table_pack(table, btn, 3, 1, 1, 1);
evas_object_show(table);
</code>

==== Managing the Items ====

If you want to change the position of the item after adding it, use the
''elm_table_pack_set()'' function. This function takes as parameters the item
whose position to change, the new column, the new row, and the size of the
item in number of rows and columns (colspan and rowspan).

To add padding around the item, use the ''elm_table_padding_set()'' function. The
second parameter is the padding between columns, and the third parameter is
the padding between rows:

<code c>
elm_table_padding_set(table, 10, 10);
</code>

To change the alignment and size of an item, use the ''evas_object_size_hint''
parameters. They are used in the same way as with boxes. You can set the same
size and weight to each item by using the homogeneous parameter:

<code c>
elm_table_homogeneous_set(table, EINA_TRUE);
</code>

==== Clearing the Table ====

To clear the table, use the ''elm_table_clear()'' function. If the clear
parameter is ''EINA_TRUE'', the table items are deleted. The
''evas_object_del()'' function will be called on each item.


\\
|//**__[[https://build.enlightenment.org/job/nightly_elm_gcc_x86_64/lastSuccessfulBuild/artifact/doc/html/tutorial_table_01.html|A First Table Example ]]__**//| //**__[[https://build.enlightenment.org/job/nightly_elm_gcc_x86_64/lastSuccessfulBuild/artifact/doc/html/tutorial_table_02.html|A Second Table Example ]]__**//|

----
{{page>index}}