Highlighted

Creating Tabular Data

New Here ,
Aug 04, 2020

Copy link to clipboard

Copied

Hi all,

I am very new to Adobe products and my background with graphics is more Paint.NET.

I want to understand how to create tables in XD.  Its something so common in layouts, yet somewhat frustating.

 

Question - what is the easiest way to do tables.


For my current incarnation I am using Stack feature.

Andez2000_0-1596532357843.png

This is being created in the Pasteboard.

Andez2000_1-1596532419705.png

The table-group grouping works well.  It is a vertical Stack.  This is the blue row.

 

header-group is just a plain old grouping consisting of a group (col-a) and a rectangle (header).  This arrangement allows me to change colour of the header row independant of mucking up group colours.

 

Group3 us meant to be a row with text in.  I cannot position row-1 for the text to appear like the header.  And this is causing me a headache.  It all looks the same as the header-group.

Andez2000_2-1596534009308.png

 

Its frustrating when I change a text colour in a Text then change the group colour - wiping out my text colour.  So if I changed col-a Fill, then it will cascade over the top of the underlying text.

 

Am I doing something wrong?  Can anyone please give me some good tips and advice to get the most out of this feature, or suggest better ways to do it?

 

Thanks

 

Paul

 

Topics

Design, How to, Prototyping

Views

45

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Creating Tabular Data

New Here ,
Aug 04, 2020

Copy link to clipboard

Copied

Hi all,

I am very new to Adobe products and my background with graphics is more Paint.NET.

I want to understand how to create tables in XD.  Its something so common in layouts, yet somewhat frustating.

 

Question - what is the easiest way to do tables.


For my current incarnation I am using Stack feature.

Andez2000_0-1596532357843.png

This is being created in the Pasteboard.

Andez2000_1-1596532419705.png

The table-group grouping works well.  It is a vertical Stack.  This is the blue row.

 

header-group is just a plain old grouping consisting of a group (col-a) and a rectangle (header).  This arrangement allows me to change colour of the header row independant of mucking up group colours.

 

Group3 us meant to be a row with text in.  I cannot position row-1 for the text to appear like the header.  And this is causing me a headache.  It all looks the same as the header-group.

Andez2000_2-1596534009308.png

 

Its frustrating when I change a text colour in a Text then change the group colour - wiping out my text colour.  So if I changed col-a Fill, then it will cascade over the top of the underlying text.

 

Am I doing something wrong?  Can anyone please give me some good tips and advice to get the most out of this feature, or suggest better ways to do it?

 

Thanks

 

Paul

 

Topics

Design, How to, Prototyping

Views

46

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Adobe Employee ,
Aug 04, 2020

Copy link to clipboard

Copied

Hi there,

 

Thanks for reaching out. For more information on Stack feature, you can refer to this article: https://helpx.adobe.com/xd/help/create-dynamic-designs-with-stacks.html

 

Regarding color fill, once you have applied a fil for the column you can still change the color of the text. To change the color of the text, double click on the text, and then select the fill. Let us know if this helps or if you need any further assistance.

 

Regards

Rishabh

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
New Here ,
Aug 05, 2020

Copy link to clipboard

Copied

Hi Risgabh,

That is one of the first articles I saw.  It doesnt cover my pain points I am having.  It would be nice to see an article that would cover the scenario of creating a data grid from scratch.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
New Here ,
Aug 05, 2020

Copy link to clipboard

Copied

I would love something to create something like the following:

2020-08-05_10-22-33.png

 

Where you could style individual rows.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
New Here ,
Aug 06, 2020

Copy link to clipboard

Copied

I have sorted my initial pain points for now, starting from scratch.  This is what I am rolling with now.


I have created a table cell component:

Andez2000_0-1596701181040.png

From this I have created a table row component:

Andez2000_1-1596701322202.png

Here the row-cells is a vertical Stack.

 

Now looking at a grid component:

Andez2000_2-1596701374112.png

Andez2000_3-1596701386249.png

The rows is a veritcal Stack.

 

If would be nice to get rid of the white space between the cells.  Is this possible?  I thought I had it before without the space.  Padding is set to zero here.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Adobe Employee ,
Aug 20, 2020

Copy link to clipboard

Copied

Hi Ande,

 

Sorry for the delay in response. Could you please double click the cell and then see if you can reduce the spaces by adjusting it manually?

 

Thanks,

Harshika

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...