how to hande the rows json about mui-datatables

[gregnb]

The latest release now supports data as objects. Example: https://github.com/gregnb/mui-datatables/blob/master/examples/data-as-objects/index.js

[jkantr]

If anyone knows how I am supposed to do code in this text editor, please let me know.

You use 3 'tick' marks: ``` followed by js, so: ```js - and then again to break the code block ```

var data = [];
var data_row_array = [];
fetch('/api/v1/messages')
	.then(res => res.json())
	.then(results => {
		results.map(row => {
			data_row_array = table_columns.map(field => {
				return (row[field.database_name ? field.database_name : ''])
			});
			data.push(data_row_array);
		})
		return data;
	}).then(results => {
		callback(results);
	});

Also, if I may as bold as to suggest a non-mutative solution to your code above:

function getData(path) {
    return fetch(path)
        .then(res => res.json())
        .then(results => {
            return results.map(row => {
                return table_columns.map((field) => {
                    return row[field.database_name] || '';
                });
            });
         });
}

(assuming i got the logic right...) - just returns the promise resolving to the array of arrays of data :)

[Deboracgs]

you do not understand what I meant, in the code I gave as an example, it is what I use, but the translation field is the same as json, in other components there is one field for the field name and another for the field json's ID @teadams

[Diaver]

@NickToye
I've made fork with TS support and DTO mapping:
https://github.com/Diaver/material-datatable
https://www.npmjs.com/package/material-datatable

[teadams]

For my project, I wrote a "massage" that takes the database json results as an input and returns the values as set of arrays instead of json.

So in your example, you would return an array like this

[
[1,'test', true]
[1, 'examples', true]
]

Make sure
a) there are no nulls (convert to empty string)
b) the order in the array lines up with the order in your columns

[teadams]

Here is my snippet. Table columns object that holds my list of columns

var data = [];
var data_row_array = [];
fetch('/api/v1/messages')
.then(res => res.json())
.then(results => {
results.map (row => {
data_row_array =table_columns.map (field => {
return(row[ field.database_name| ? field.database_name : ''])
});
data.push(data_row_array );
})
return data;
}).then(results => {
callback(results);
});

[teadams]

apologies for the indentation above. I used the "insert code" button. If anyone knows how I am supposed to do code in this text editor, please let me know.

[teadams]

Thanks!

[Deboracgs]

how translate field? if the field name is same field to json @teadams @gregnb @jkantr

[teadams]

You can actually use anything... column might be conceptually better choice. You could just use "x".

table_columns is an array of columns. In the map function, the variable field is used to represent one element of the array, or one of the columns in table_columns.

[teadams]

If my example, tables_columns in the same as your columns.
I have an extra property called "database_name". If the name for the column in the database matches the name property, you would use "name" instead of "database_name".

function getData(path) {
    return fetch(path)
        .then(res => res.json())
        .then(results => {
            return results.map(row => {
                return columns.map((column) => {
                    return row[column.name] || '';
                });
            });
         });
}

[car1sberg]

It would be great to add implementation that allows to use data prop as an array of objects, idk where we can use array of arrays in real world projects and data as shown above - [1,'test', true] but not {id: 1, name: "test", active: true}
If i misunderstood something, please let me know

[jkeruzec]

The proposed solution is not optimized because of column like "edit" which corresponds to button and not to data itself ..

edit: I implemented it adding a boolean data true/false and adding a filter on columns before mapping then..

[adetwiler]

@jkantr or anyone else. I'm working on a project where it doesn't seem that a remote solution works very well. I may be missing something, but while I get the data from a remote source, such as the example you provided. I seem to be having issues in other areas, such as pagination, getting the rows per page, searching, filtering, etc. It appears a lot of these classes are trying to index base the whole dataset, but when I sent back paginated data from a remote source, I'm seeing a lot of issues trying to get everything else working. I know you're not the author, but it seems you have implemented this before. I was curious how you were able to handle the remote dataset (which paginates the data from a SQL database), with searching, filtering, pagination, etc?

I know that currently, it seems that the pagination count is not able to be passed in as a prop, but I haven't been able to figure out how to get anything else working.

[NickToye]

Does anyone have a working example of this?

Maybe it's late in the week but I'm confused.

I'm getting 'table_columns' is not defined error.