DataTable Unique Format?

zgoforth

Hello, I am making a new question because my other was answered and I do not want to have a continuous thread going.

So I am creating a DataTable with data I consider to be non-tabular, but DataTables is the only way I can figure out how to display it. I've tried template literals, and Mustache.js and neither of them would work.

this is going to sound ridiculous because it is obviously a table, but is it possible to have the data displayed like so:

No column headers

Row 1 = Date (what it is ordered by)
SubRow 2 = Team (ordered by team(there are about 10 different teams))
SubRow 3 = Major Tasks
Child row of Subrow 3 = Major task data
SubRow 4 = Deliverables
Child of subrow 4 = deliverables data

So on and so forth?

Here is my fiddle: https://jsfiddle.net/msbgh0yu/

allan

RowGroup might do what you are looking for? You can have multiple levels of nesting in it.

Allan

zgoforth

@allan So that is what I am currently using. For better sense of the question (hard to demonstrate like I mentioned because this Data isn't necessarily "tabular" but DataTables is the best luck that I have had).

Is it possible to have all column headers hidden.

And if you look at the JSFiddle in OP,

Have the weekof column where it is because thats what I initially want to sort by. Followed by the Team column, which is where it needs to be.
(The only team data pulled through is the name of the team, and the date obviously is just the week of)

Next, all the other columns are going to have quite a bit of multiline text associated with them. for example in the fiddle the tasks column, have that as another child row and one column of the associated multi line text data under that. Same for the next deliverables column, and so on and so forth so it would look something like.

+1/25/2021 (grandparent row)
+ Cowboys (parent row)
+ Tasks (child row)
+- Multi line text associated with tasks (grandchild row)
+ Deliverables (child row)
+- Multi line text associated with deliverables. (grandchild row)

And so on.

I am not to familiar with the family tree of html but I think my explanation can easily be interpreted.

kthorngren

Its hard to provide a specific solution without understanding what your data structure is.

Another option you might look at is child detail rows. This example from this thread shows how to have multiple levels of child detail rows as Datatables.

an you build up an example that shows a sample of your full data set so we can offer more specific suggestions?

Kevin

zgoforth

@kthorngren taking a look at it now. Ill get back to you in a bit. And in reference to the full data set, do you want the JSON or what? There is no actual data in this SharePoint list I am pulling from yet, it will be implemented after my DataTable is done.

allan

It sounds like you are looking for a Tree view. That isn't something that DataTables does I'm afraid. The closet we get is RowGroup which will group similar information visually. Whether that is suitable for your use case or not really depends on the structure of your data. For example in your JSON do you have one "host" row which contains all of the information needed for the grouping (e.g. the date, team, etc)?

Yes, if you could show us a sample of your JSON that would be useful.

Allan

zgoforth

@allan Thank you I will do some research on Tree view, but the JSON is in my fiddle or do you need something different from that?

zgoforth

@allan what about procedural nested readers are you familiar with that?

kthorngren

One of your rows looks like this:

         {
            "WeekOf":"2021-01-15",
            "Team":"Raiders",
            "Tasks":"Insert something about the tasks",
            "Deliverables":"Insert something about the deliverables",
            "Actions":"Insert something about the actions",
            "Billable":"Insert anything billable",
            "Non_Billable":"Insert anytihng non-billable",
            "Upcoming":"Insert something about the upcoming event",
            "Training":"Insert something about the training",
            "Resource":"Insert something about the resources",
            "Support":"Insert something about the support"
         },

It would be very difficult to display in this format:

+ "WeekOf"
      "2021-01-15"
        + "Team"
              "Raiders"
              +  "Tasks"
                      "Insert something about the tasks"
              + "Deliverables"
                      "Insert something about the deliverables"

If you had one row for each Tasks and one row for each Deliverables then you could use RowGroups for the third level, for example:

[
    {
            "WeekOf":"2021-01-15",
            "Team":"Raiders",
            "DataType": "Tasks",
            "Description":"Task 1"
    },
    {
            "WeekOf":"2021-01-15",
            "Team":"Raiders",
            "DataType": "Tasks",
            "Description":"Task 2"
    },
    {
            "WeekOf":"2021-01-15",
            "Team":"Raiders",
            "DataType": "Deliverables",
            "Description":"Deliverables 1"
    },
    {
            "WeekOf":"2021-01-15",
            "Team":"Raiders",
            "DataType": "Deliverables",
            "Description":"Deliverables 2"
    },
]

Then you could use:

            rowGroup: {
                dataSrc: [
                    'WeekOf',
                    'Team',
                    'DataType'
                ],

Then display the following columns:

            "columns": [{
                    "data": "WeekOf",
                    visible: false
                },
                {
                    "data": "Team",
                    visible: false
                },
                {
                    "data": "DataType",
                    visible: false
                },
                {
                    "data": "Description"
                }
            ],

Then for each Tasks DataType all of the `Descriptions would be shown on individual rows.

Would you be able to change your data to look like this? You might need to restructure the server data before handing it to Datatables.

Kevin

kthorngren

Another option might be to incorporate child row details for the third level to show Tasks, Deliverables, etc as rows in their own Datatable. This could work with your data structure but would take some effort to workout the code.

Kevin