Show Row Numbers on a Table?

Ask the community
,
1

I have added a Table (from lists and grid) linked to a dataset linked to a database. Is there a way I can display row numbers in each row like in Excel?

2

Hello Yashika,
How many records do you have in this collection?
As I see it, there are 2 ways solve your problem:

  1. The easiest/naive way is to add a column to your collection and set a number to each row.
  2. Another solution is to link table component to your collection via code, and add the row index in onItemReady() function.
    Let me know which way you decide and if you need help with the code solution.
3

Hello Eli Yadgar,

Can you please provide a sample for Method 2) i.e. Another solution is to link table component to your collection via code, and add the row index in onItemReady() function.

4

Hi, I would also like to know how to display row numbers in a table linked to a database. Thank you!

5

Hi,
Lets say you have a collection of colors and you would like to store in a table the colors with row index, you need to add a table to your stage, call one column ‘color’ and the second column ‘index’ and what you need to do is getting all ‘colors’ database items via wix-data, from the results take only the fields you’re interested in, and create a new object with the added field index as described below. it is very important that the table column names will be the same as the field names of the object you’d like to set to the table.

wixData.query("colors")
		.find()
		.then((results) => {
			const rowsToLoad = results.items.map((r,i) => {
			        // create a new object with 
			        // the relevant fields(color)
			        // and the added 'index' field
				return {"color": r.color, "title": i} 
			})
			console.log(rowsToLoad);
			//set the objects array back to '#table1' 
			$w("#table1").rows = rowsToLoad;
		});
6

Why? The tables provided by wix only allow 4 rows