currently I am using Gridjs to display my table in my Reactjs application.
This is the code, the Name, and Email is displaying correctly, but the created_at is not, giving me empty. How can I display the data? thank you..
You need to define a custom id for your column if you're using a JSON input.
Example:
const grid = new Grid({
columns: [{
id: 'name',
name: 'Name'
}, {
id: 'email',
name: 'Email'
}, {
id: 'phoneNumber',
name: 'Phone Number'
}],
data: [
{ name: 'John', email: 'john#example.com', phoneNumber: '(353) 01 222 3333' },
{ name: 'Mark', email: 'mark#gmail.com', phoneNumber: '(01) 22 888 4444' },
]
});
See https://gridjs.io/docs/examples/import-json/
Related
I am following a course on react native and We are using Sanity as our backend. I have already set the schemas and made the adjustments in my Sanity Studio.
HERE IS MY FEATURED SCHEMA CODE:
export default {
name: 'featured',
title: 'featured Menu Categories',
type: 'document',
fields: [
{
name: 'name',
type: 'string',
title: 'Featured category name',
validation: (Role) => Role.required(),
},
{
name: 'short_description',
type: 'string',
title: 'Short description',
validation: (Role) => Role.max(200),
},
{
name: 'restuarants',
type: 'array',
title: 'Restuarants',
of: [{ type: 'reference', to: [{ type: 'restuarant' }] }],
},
],
};
HERE IS MY RESTAURANT SCHEMA CODE:
export default {
name: 'restaurant',
title: 'Restuarant',
type: 'document',
fields: [
{
name: 'name',
type: 'string',
title: 'Restuarant name',
validation: (Role) => Role.required(),
},
{
name: 'short_description',
type: 'string',
title: 'Short description',
validation: (Role) => Role.max(200),
},
{
name: 'image',
type: 'image',
title: 'Image of the Restuarant',
},
{
name: 'lat',
type: 'number',
title: 'latitude of the restaurant',
},
{
name: 'long',
type: 'number',
title: 'longitude of the restaurant,
},
{
name: 'address',
type: 'string',
title: 'Address of the Restuarant',
validation: (Role) => Role.required(),
},
{
name: 'rating',
type: 'number',
title: 'Enter a rating of (1 - 5)',
validation: (Role) =>
Role.required()
.min(1)
.max(5)
.error('please enter a number between 1 - 5'),
},
{
name: 'type',
type: 'string',
title: 'Category',
validation: (Role) => Role.required(),
type: 'reference',
to: [{ type: 'category' }],
},
{
name: 'dishes',
type: 'array',
title: 'Dishes',
of: [{ type: 'reference', to: [{ type: 'dish' }] }],
},
],
};
I also did one for the dish and category.
Then I went to my Sanity Studio to fill in my restaurant schema fields;
After I went to my Vision Board in Sanity Studio and did a query(Just like the instructor):
*[_type == "featured"]{
...,
restuarants[]=> {
...,
dishes[]=> ,
type=> {
name
}
},
}
And I got an error of:
unexpected token ",", expected expression ;
I did what any developer would have done if they got an error. I double-checked my code and compared it to the instructor in the video. (I still got the error). Then I googled it(And found no answer). It's been 2 days now and I still haven't found anything.
This is my first querying in Sanity and I am not sure what I am doing wrong with my query. Can anyone please help me? Thanks.
As the error mentioned, you missed a ' in your schema code.
Keep a ' after restaurant
{
name: 'long',
type: 'number',
title: 'longitude of the restaurant',
},
No worries I found the answer to my problem. The problem was with my querying.
HERE WAS MY CODE BEFORE:
*[_type == "featured"]{
...,
restuarants[]=> {
...,
dishes[]=> ,
type=> {
name
}
},
}
THIS IS HOW I WAS SUPPOSED TO WRITE IT:
*[_type == "featured"]{
...,
restuarants[]-> {
...,
dishes[] -> ,
type-> {
name
}
},
}
I was supposed to use a straight line instead of an equal sign.
I hope this helps anyone who runs into this problem
I have been struggling to set a filter a column that has multiple data in Material-table.
The data is below:
data: [
{
id: 1,
staffName: "John",
role: "1"
},
{
id: 2,
staffName: "Smith",
role: "1,2"
},
{
id: 3,
staffName: "Alex",
role: "2"
}
],
role: {
1: "administrator",
2: "sales"
}
};
The column is below:
const columns = [
{ title: "Id", field: "id" , filtering: false},
{ title: "Name", field: "staffName" , filtering: false},
{
title: "Role",
field: "role",
lookup: roles,
render: (data) =>
data.role
.split(",")
.map((s) => roles[s])
.join(", ")
}
];
I want to show John and Smith when administrator is checked to filter in Role,
but it shows only John.
Similarly, when sales is checked only Alex shows up(I want to show both Smith and Alex).
How can I change the filter including data checked?
Link to code sandbox here
I want to create a button inside table column. I have tried using Cell but its not working.
Cell: ({ cell }) => (
<button value={cell.row.values.name} onClick={props.handleClickGroup}>
{cell.row.values.name}
</button>
)
You can render a button inside column using the render property:
const columns = [
{
title: 'Button Test',
key: 'key',
dataIndex: 'key',
render: (text, record) => (
<button onClick={()=> console.log(record)}>
{"Button Text"}
</button>
),
},
];
const data = [
{
key: '1',
name: 'John Doe',
age: 35,
address: 'New York No. 1 Lake Park'
},
];
<Table
columns={columns}
dataSource={data}
/>
If it is ant-design for Vue you can try this:
Template
<template>
<a-table :columns="columns" :data-source="data">
<a-button slot="action">{ buttonText }</a-button>
</a-table>
</template>
Script
<script>
const columns = [
{ title: 'Name', dataIndex: 'name', key: 'name' },
{ title: 'Age', dataIndex: 'age', key: 'age' },
{ title: 'Address', dataIndex: 'address', key: 'address' },
{ title: 'Action', dataIndex: '', key: 'x', scopedSlots: { customRender: 'action' } },
]
const data = [
{
key: 1,
name: 'John Brown',
age: 32,
address: 'New York No. 1 Lake Park',
description: 'My name is John Brown, I am 32 years old, living in New York No. 1 Lake Park.',
},
{
key: 2,
name: 'Jim Green',
age: 42,
address: 'London No. 1 Lake Park',
description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.',
},
]
export default{
data(){
return{
data,
columns,
buttonText: "view"
}
}
}
</script>
You can find more information on their site https://antdv.com/components/table/ under Expandable Row
I am generating dataTable using material-table plugin in ReactJS. I couldn't find any direct way or option to generate rowspan or column span at dataTable using the plugin. Is there any way to do it ?
Here is a sample screenshot of what table might look like but will be shown via dataTable
The explanation of what you are trying to do is a little bit unclear.
If you want to add something like a button on each row in a col span you can define it in the "columns" prop of your Table like so:
columns={[
{ title: 'Update', field: '', render: rowData => <button onClick={() => doSomethingWithId(rowData.id)} className="myTableButtonStyle" /> },
{ title: 'Name', field: 'name' },
....
]}
This will add an update button which will call on the doSomethingWithId() function passing the id of the line as a parameter.
Is it what you are looking for? Else would you mind explaining a little bit more what you want?
EDIT
Here is what i obtain
with the following code
<MaterialTable
data={[
{ name: '', nationality: 'British', address: '', country: 'England' },
{ name: 'Noor', nationality: 'American', address: 'California', country: 'US' },
{ name: '', nationality: 'Chinese', address: '', country: 'China' },
{ name: '', nationality: '', address: '', country: '' },
]}
columns={[
{ title: 'Name', field: 'name' },
{ title: 'Nationality', field: 'nationality' },
{ title: 'Address', field: 'address' },
{ title: 'Country', field: 'country' },
]}
options={{
rowStyle: {
height: '25px',
},
}}
title="Display Data"
/>
You don't need to add rows or colspan to achieve this render, just giving the good dataSet and the Columns definition will do.
In your data props you need to give a list of objects with all the datas you need.
You then define which datas are displayed where with the columns props. if you want a more personalize render in one column (ex: you want to display the country in bold) you can define it by giving a render in the columns object like so:
{title: 'Country', field: '', render: rowData => <strong>{rowData.country}</strong>
for the empty row to have the same size as others, use props options on your table.
Does this help you?
I am novice to Ext-js and referring sencha.com for tutorials. I am trying to modify an existing application build in ext-js 2.2. It has in particular page following options for checkbox.
var assetPermissions = [
{ id: 'MF', name: 'Mutual Funds' },
{ id: 'ETF', name: 'ETFs' },
{ id: 'CE', name: 'Closed End Funds' },
{ id: 'ST', name: 'Stocks' },
{ id: 'VA', name: 'Variable Annuities' },
{ id: 'FI', name: 'Bonds' },
{ id: 'SMA', name: 'Separately Managed Accounts' },
{ id: 'MO', name: 'Models' },
{ id: 'MM', name: 'Managed Models' },
{ id: 'UD', name: 'User Defined' },
{ id: 'I:MD', name: 'Model Dashboard' },
{ id: 'I:SC', name: 'Screener' },
{ id: 'CUAS', name: 'Create Custom Assets & Folders' },
{ id: 'OA', name: 'Other Assets'}
];
Now I want that when a user selects the Other Assets option in the check box and another check box should be prompted something like this.
Name Select
ABC
XYZ
Save | Cancel
I also want a Save and Cancel button for that dialog box and changes made to it are saved.
So can any one suggest how to do this in ExtJs. Thanks.