Comments (15)
Ooops - I did not add the appropriate code to index.html
. After doing so I get a new error
Error: Element ref was specified as a string (tableLoaded) but no owner was set. This could happen for one of the following reasons:
1. You may be adding a ref to a function component
2. You may be adding a ref to a component that was not created inside a component's render method
3. You have multiple copies of React loaded
See https://fb.me/react-refs-must-have-owner for more information.
from reactables.
Hello thanks for issue, I'll definitely take a look at this problem later probably at week-end.
It seems like deprecated features in ReactJS.
from reactables.
Thanks Arthur! I was thinking it could be webpack related as well, the webpack.config.js references a main.js but in my project im using index.js.
I am a newb to React so I am still figuring out all the little pieces :)
from reactables.
Launched on webpack config:
const path = require('path');
const config = {
mode: 'development',
entry: './main.js',
output: {
path: path.normalize(__dirname + '/build'),
publicPath: '',
filename: 'index.js',
library: '[name]',
chunkFilename: '[name].[chunkhash].js'
},
devServer: {
inline: true,
port: 8888
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['@babel/preset-react'] // stage-2 = transform-object-rest-spread etc
}
},
{
test: /\.css$/,
loader: 'style-loader!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]'
},
{test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'}
]
},
externals: {
'react/addons': true
},
node: {
console: false,
fs: 'empty',
net: 'empty',
tls: 'empty'
}
};
module.exports = config;
There are actually crucial changes again as always in webpack
Also check package.json
file there shouldn't be any presets, but
presets: ['@babel/preset-react'] // stage-2 = transform-object-rest-spread etc
an example of package.json file:
const path = require('path');
const config = {
mode: 'development',
entry: './main.js',
output: {
path: path.normalize(__dirname + '/build'),
publicPath: '',
filename: 'index.js',
library: '[name]',
chunkFilename: '[name].[chunkhash].js'
},
devServer: {
inline: true,
port: 8888
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['@babel/preset-react'] // stage-2 = transform-object-rest-spread etc
}
},
{
test: /\.css$/,
loader: 'style-loader!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]'
},
{test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'}
]
},
externals: {
'react/addons': true
},
node: {
console: false,
fs: 'empty',
net: 'empty',
tls: 'empty'
}
};
module.exports = config;
from reactables.
So I think my issue was with webpack... I just cant get any data now using https://jsonplaceholder.typicode.com/todos for testing. My table just says Loading...
from reactables.
Now I see - u don't have required rows
key in the document, so it should look like that:
{ "rows": [
{
"userId": 1,
"id": 1,
"title": "delectus aut autem",
"completed": false
},
.....
]
}
from reactables.
Thank you!!!
from reactables.
Is there a way to change the "rows" part to accept different formatted json feeds?
from reactables.
For example?
from reactables.
give me a bit to figure out what to ask :) need to test some code!
Thanks so much!
from reactables.
I created an API that follows the spec:
{
"rows": [
{
"date": "Oct 30 ",
"hostname": "frickyou",
"msg": "anacron[23035]: Job `cron.daily' terminated",
"time": "00:07:40"
},
{
"date": "Oct 30 ",
"hostname": "frickyou",
"msg": "anacron[23035]: Normal exit (1 job run)",
"time": "00:07:40"
},
I modified my code to match the dictionary keys. I no longer get Loading...
but I get no data now.
edit - i have a network error in my console logs. sorry!
PS -> really appreciate the help :) Thank you
from reactables.
I have a network error in my console logs but the api works fine from my browser... when this makes the ajax call, does the server or the browser make that call?
the console says TypeError: NetworkError when attempting to fetch resource.
but in the network tab i see
it is responding with a 200. My api endpoint is a flask app that looks like:
import re
@app.route("/api/syslog", methods=["GET"])
def syslog():
f = open("/var/log/syslog","r").readlines()
l = []
for i in f:
a = re.match('(\S*\s\S*\s)(\d*:\d*:\d*)\s(\S*)\s(.*)\\n',i)
#print( a.groups() )
e = { "date": a.group(1),
"time": a.group(2),
"hostname": a.group(3),
"msg": a.group(4) }
l.append(e)
d = {"rows": l }
print( d )
return jsonify(d)
On the webserver I see
192.168.1.70 - - [30/Oct/2019 19:58:58] "OPTIONS /api/syslog HTTP/1.1" 200 -
seems the ajax request is only making an OPTIONS request?
thanks for your help
edit - adding requestType: 'GET',
to my main.js didnt fix it =[
edit2 - it appears this OPTIONS thing is related to CORS. I tweaked the backend API and I am getting GET requests from my api. However, I am back to the Loading...
situation :) my browser console has an error uncaught exception: Object
but in the network tab i see we did GET from the api.
My API is returning in the right format... idk what to do.
from reactables.
apparently the id
key is required in the json results :)
from reactables.
rows
must be anyway, but the inner structure is free to change in any way:
{ "rows": [
{
{"log":"Oct 30 00:07:40 frickyou anacron[23035]: Job `cron.daily' terminated\n"},
{"log":"Oct 30 00:07:40 frickyou anacron[23035]: Normal exit (1 job run)\n"},
},
.....
]
}
so there will be 1 column log, you can put as many columns as u wish and those which shouldn't be displayed will be empty.
PS imagine this as rows/columns - nothing more nothing less.
from reactables.
apparently the
id
key is required in the json results :)
Yes, if you didn't set GT_RowId
, then the 'id' will be taken for data manipulation.
from reactables.
Related Issues (20)
- how to send default value in create-editor to the back-end just like in edit-editor? HOT 5
- table display incorrectly after clicking the last page number at the bottom HOT 7
- the edited data isn't updated after keyword searching
- Can't make the gigatable-react align to the left of the screen HOT 1
- can't edit the data that aren't on the first page HOT 12
- Field values don`t change after Create action and filled-in inputs
- Make GT_RowId unnassasary for every component HOT 2
- Example Gigatables HOT 1
- Custom select form field as a plugin
- Implement react-switch-button control as plug-in HOT 1
- Integrate material UI for all elements - buttons, inputs, select etc
- When page is n > k and search result < k renders empty page HOT 1
- On checkbox set in Editor an array of elements must be passed to request
- Editor and Tools tests failed on build in material-ui branch - fix before merge
- Create tables of props (readme) in settings and editor for usage convenience
- the delete-editor doesn't close automatically HOT 9
- Selected row unset on click with Ctrl(Cmd)+click in editableCell === false mode HOT 1
- Update react, react-dom to newer versions
- On search when Ctrl+A it selects all rows and on delete not refreshing results HOT 1
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 reactables.