Comments (15)
The latest release now supports data as objects. Example: https://github.com/gregnb/mui-datatables/blob/master/examples/data-as-objects/index.js
from mui-datatables.
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 :)
from mui-datatables.
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
from mui-datatables.
@NickToye
I've made fork with TS support and DTO mapping:
https://github.com/Diaver/material-datatable
https://www.npmjs.com/package/material-datatable
from mui-datatables.
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
from mui-datatables.
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);
});
from mui-datatables.
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.
from mui-datatables.
Thanks!
from mui-datatables.
how translate field? if the field name is same field to json @teadams @gregnb @jkantr
from mui-datatables.
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.
from mui-datatables.
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] || '';
});
});
});
}
from mui-datatables.
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
from mui-datatables.
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..
from mui-datatables.
@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.
from mui-datatables.
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.
from mui-datatables.
Related Issues (20)
- Pagination Rows per Page resetting itself after clicking on custom button in column HOT 6
- Column Drag not working HOT 3
- in customHeadRender only 1 column needs to sort and not remaining elements HOT 1
- Link on github front page is malicious HOT 1
- Not wroking
- muidatatable scroll bar reset
- Not able to hide expander icon from specific rows
- Why are all the examples broken? HOT 1
- Print only appeared content rows with tableBodyMaxHeight applied
- Twitching while dragging columns
- Bad typing on MUIDataTableOptions renderExpandableRow - rowData
- Responsivenes Stacked not working
- setCellProps and setCellHeaderProps not working in mobile
- Customizing the contents of a chip label
- Cant search data with children having array of objects
- how to filter an date column by month
- States are not updating in customBodyRender
- [discuss] I need filter in table theader
- SearchBox vanished on pressing Escape even with `searchAlwaysOpen: true`
- Table not stack on responsive
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from mui-datatables.