How do I create a table for manual input on my webage without using the elements available or the CMS dataset

Hi all,

I am trying to create a sort of a dictionary list on my webapge, however I would want to make it possible for manual edit. I have tried using the Layouts>Table elements (repeater), but it requires a dataset. I would like to just create a simple table, like a spreadsheet to input, so it will appear like the following (manual, as I want to be able to have color coding for some entries too like in the following)

image

May I know if anyone has an idea? I have been searching for days and can’t seems to find anything.

Thanks in advance
E

Does anyone has any idea? Table Master is also not available for wix studio, is there any alternative?

Regards
E

Is there really no one who can help here?

Regards
E

Why the REPEATER is no option for you ?

A → REPEATER is the better —> TABLE.

If you do not want to use a REPEATER → there is still the ordinary TABLE-OPTION (NOT-TABLE-MASTERS).

Another question why you do not want to use a DATASET ?
Your data should be stored inside of a → DATABASE and not directly on the page.

So your wanted way is somekind of counterproductive.

hi @CODE-NINJA ,

Thanks for the reply.

I have tried to use to repeater, however, there are some elements that I doesn’t seems to be able to control. For example,

This is my CMS


This CMS has the following fields: Title, URL, TopDomain, Status

I used the repeater to display what I needed as shown below

However the column with the TopDomain, I am unable to make them as hyperlinks (which I have in my CMS but I want the TopDomain display only)

Also in my CMS, I have the “Status” as “Active”, I would like the TopDomain text to be in green, but I also can’t seems to be able to do it too.

For those Status Active, I also want to display an animated badge either over the the repeater.

Are there anyway to do it? I have tried whatever I can think of but there doesn’t seems to be anything I can do with my limited experience and knowledge.

Once again, thanks in advance for any insights or help you may have.

Regards
E

Ok, back to you. I am sure that what you are trying to achieve is doable.
The question is, are you familiar with coding.

I asume your setup only includes a database, where you have connected a simple dataset and to the dataset you have connected a repeater?

Now you got the result we can see on your pic? Was this the way you have taken ?

Let first collect some facts…

  1. You will have a database running in your background.
  2. You will need the REPEATER to be able to generate a TABLE-LIKE overview.
  3. First think of, which elements you want to have inside of your repater.
    In your case…
    a) FIELD —> “TopDomain” which includes website-links in type of STRING (TEXT).
    b) FIELD —> “Status”, which is a TAG-FIELD.
    c) And there is a request to make your STRING clickable in form of HYPERLINKS ?

So now you have 2-options you can chose.

  1. You work again with —> DATASET → but this time you go the coding way.
  2. You work with ------------> Wix-Data → this will be a FULL-CODED SOLUTION (most custom and flexible way you can go).

There is also a third way → which would be a mix of coding and using Wix-Out-Of-The-Box-Elements, but this way is not recommended, since taking this way → you should know what you are doing → tricky way.

But before we choose a way → maybe you first show your current seup, that means…

  1. How did you connect all elements together?
  2. Did you use a DATASET ?
  3. Did you use code?

What you could try is…

$w.onReady(()=>{
   $w('#dataset1').onReady(()=>{
      $w("#myRepeater").onItemReady( ($i, iData, index) => {
        console.log('Item-Data: ', iData);        
      });
   });
});

Now take a look onto your console, if you get the data logged for every existing item in your dataset (database).

Next step: Let us generate an IF-ELSE-CONDITION…

$w.onReady(()=>{
   $w('#dataset1').onReady(()=>{
      $w("#myRepeater").onItemReady( ($i, iData, index) => {
        console.log('Item-Data: ', iData);      
        console.log('ID: ', iData._id);  
        console.log('Status: ', iData.status);
        console.log('-----');
        //---------------------------
        if(iData.status ==='Active' || 'active') {console.log(iData.title+ ' is '+ iData.status);}
        else {console.log(iData.title+ ' is not '+ iData.status);}
      });
   });
});

Check the logs in your console.

Hi @CODE-NINJA ,

Thanks.

I have connected it using the Wix Studio built-in function to the dataset that I have
image

and currently I have not use any code, as I have only the most basic knowledge of coding.

I have ran the first code and it did log my data as shown below in the output

I have also run the second code provided, but it seems I am unable to retreive the status, could it be because it’s a “tag”?

image

Yes, because it’S a —> TAG <— my fault.

Change from this…
console.log('Status: ', iData.status);

…to this one…
console.log('Status: ', iData.status[0]);

As you can see, the logs already working.

Now try to understand whats going on.
Try to find out what kind of data you need to proceed and how to expand the code.