I'm using an expandable table from antd design version 4.10 in my app with Next.js v10.0.4. When I clicked in + button in table its suppose to open only the row which is selected but I don't know why it is opening all the rows at same time.
This is my table component:
<Table
size="small"
dataSource={data}
columns={updateColumns}
expandable={{
expandedRowRender: (record) => (
<p style={{ margin: 0 }}>{record.description}</p>
),
rowExpandable: (record) => record.level !== "3",
onExpand: (expanded, record) =>
console.log("onExpand: ", record, expanded),
}}
/>
Is exactly the same code as documentation in antd design: https://ant.design/components/table/#components-table-demo-expand
You need a key property for each record in your data. If you have no key property, you can specified it on <Table> component using rowKey prop
<Table rowKey="your_data_id" />
I had the same problem with the table, I issue is not the code but your data. For the table work you need to add a "key" to every set of json data that you are giving to the table .
Example:
[
{
"key": 1,
"name": "hello",
"surname": "world"
},
{
"key": 2,
"name": "hello",
"surname": "world"
}
]
This probably due to missing keys in your dataSource array which is fed into the Table, which can be verified by a message in the DevTools console saying smth about missing key.
Related
and I have the following code:
return (
<Box sx={{ height: 400 }}>
<DataGrid columns={columns} rows={rows} />
</Box>
)
and I am having the table getting rendered as:
I want the column of the email to take the width of the widest row cell automatically, so I want the table to render as follows:
My colums and rows look simply as follows:
const columns = [ { field: "firstName" }, { field: "lastName" }, ...etc ]
const rows = [
{ firstName: "Camil Pasa Sokak", lastName: "In The Village", ...etc },
... etc
]
How to do it in MUI x (community table, the free one)?
I want the column of the email to take the width of the widest row cell automatically
please note: since the table is wide, it will automatically show you a scrollbar (x and y scrollbars). I want to keep this functionality, I want to keep these scrollbars (from the x and y) I don't want to disable them.
Here's a sandbox instnce:
https://codesandbox.io/s/strange-newton-z6pwj4?file=/src/App.js
Looking at the docs for the datatable component you are using, it's not super clear the best way to go about it. The crux of the problem is that this is a div + flexbox table and not a true html table. As such, cells within a single column are not really "bound" to each other the same way as a regular html table.
There is a page which addresses column dimensions, but I could not find a satisfactory solution there. I was particularly disappointed that maxWidth seems to do nothing. The closest I got was setting a fixed column width, but I don't think that's what you want:
const columns = [{
field: "email", width: 300,
}]
So then I moved on to their styling cells page, which allows you to have much more control over styling, but this still doesn't work because one flex cell does not affect the size of all flex cells in a column - each row has a different sized cell based on the size of the email address.
const columns = [{
field: "email", cellClassName: "foobar",
}]
<DataGrid columns={columns} rows={rows} sx={{
"& .foobar": {
maxWidth: "300px !important"
}
}} />
So, my best suggestion is to loop over the data, find the longest email address, and set the fixed width based on that. This kinda sucks, but I don't see another way to properly set dimensions for a flexbox-based table:
const longestEmail = rows.reduce((longest, row) => {
return row.email.length > longest.length ? row.email : longest
}, '');
const columns = [{
// play around with the multiplier until you find a suitable width
field: "email", width: longestEmail.length * 9,
}]
This is from the Documentation..Number Signature
<DataGrid
columns={[
{ field: 'username', colSpan: 2, hideable: false },
{
field: 'organization',
sortable: false,
filterable: false,
hideable: false,
},
{ field: 'age', hideable: false },
]}
rows={rows}
{...other}
/>
you can use colspan but it sets all cells in the column to span a given number of columns.
const columns = [{
field: "email",colSpan:2,
},]
I am trying to use react-table to visualise some data structured as below:
{
companyName: "Barclays Bank Plc",
tenancies: ["G.01 # Newbuilding"],
status: "Active",
accountNumber: "EX209302",
logo: "companylogo1",
},
{
companyName: "Boeing AerospaceLtd",
tenancies: ["G.01 # Newbuilding", "G.02 # Newbuilding"],
status: "Active",
accountNumber: "EX209302",
logo: "companylogo1",
},
My column definition (which doesn't work) looks something like this:
{
Header: "Tenancies",
accessor: "tenancies",
Cell: (tableProps) => (
<div>{tableProps.cell.value.forEach((item) => item)}</div>
),
},
What I am trying to do is display each array item within it's own HTML tags (such as a div) so I can visually style and seperate them within the table cell.
Can anyone point me in the right direction as to the best way to achieve this?
According to the API document, the Cell receives the table Instance and returns a valid JSX.
{
...
Cell: (tableInstance) => JSX
}
Since the tenancies array are available from tableInstance.row.original.tenancies, so you can change your tenancies column definition as follow:
{
Header: "Tenancies",
Cell: ({ row }) => {
return (
<div>
{row.original.tenancies.map((tenancy, i) => (
<div key={i}>{tenancy}</div>
))}
</div>
);
}
}
Here is the example:
Please help. I have been using Vue Tables 2 for > 2 years now, and I have never had this problem. My table shows up perfectly as usual, but now whenever I click on a cell, it is surrounded by a blue outline on chrome and a dotted outline on firefox. It is exhibiting the same behavior as if I had clicked on an input. I went through my Vue Tables 2 options one by one, disabling each in turn and it did not change the behavior. I looked through bootstrap 4 tables documentation, and could not find the same behavior as a option, so i believe it is vue tables that is doing it. The demo fiddle on the Vue Tables 2 page also has this behavior. It is very distracting and I am trying to get it to stop.
My goal is to have the table show the behavior it has before, which is to do nothing when you click on a cell.
I am using Bootstrap 4.4, and Vue-Tables-2 version 1.6.25
My options array looks like so
tableOptions: {
skin: 'table table-sm table-hover border-0',
filterable: true,
pagination: { chunk:4 },
perPageValues: [],
perPage: 18,
dateColumns: ['created_at'],
dateFormat: 'MM-DD-YYYY',
toMomentFormat: 'YYYY-MM-DD H:mm:ss',
texts:{
filter:"",
count:"",
filterPlaceholder:"Search",
page:"Page:",
noResults:"No matching records",
loading:'Loading...',
},
columnsClasses: {
cntCnt: 'text-center noOutline',
qtCnt: 'text-center noOutline',
statusName: 'text-center noOutline',
created_at: 'text-center ',
},
headings: {
id: 'Ref',
name: 'Name',
cntCnt: 'Contacts',
qtCnt: 'Quotes',
statusName: 'Status',
created_at: 'Created',
orgSelect: '',
},
}
I have added a picture that shows whats going on.The outline is arouns any and every cell I click, including the column headers.
That is the focus selector of CSS whose style is being applied. See here: https://developer.mozilla.org/en-US/docs/Web/CSS/:focus
You need to override this CSS and set border to none.
You can also do this:
:focus { outline: none; }
I am currently designing a table that was made with rc-table. I made the last row for actions which renders the buttons edit and delete. I want to edit it's style with Sass but I was unable to
I also specified classes for both the edit and delete button since they'll have different background-colors.
Is it possible to access it directly via a class? or is there another way which I don't know about.
for example if you have something like this in your code
this.columns = [
{
title: 'Operations', dataIndex: '', key: 'd', render: (text, record) =>
<a className="delete-btn" onClick={e => this.onDelete(record.key, e)} href="#">Delete</a>,
},
];
you can add class t the a element and the overwrite those styles with your CSS/SASS.
like this
.rc-table td {
background-color: 'red';
// custom styles here
}
notice the className attribute in a.
i am have 2 forms, and in first form i am have button1:
Buttons[{
width: 350,
text: 'Book',
name:'button1'}]
on second form i am have button2, and when button click in second form, then button in first form disabled, before i am use id of button (id:'button1') and make this:
Ext.getCmp('button1').setDisabled(true);
but now i am remove ID and use name in components. But i am didn"t know how disable button1 by name!
Buttons don't have a name property - you should consult the documentation to see what configuration variables you have available to you. I'd instead assign it an itemId so you can make use of the up() and down() functions in order to easily find an item in the component hierarchy from an event handler.
Or if you want to find it directly you can use the following to lookup up the item:
{
text : 'Button',
itemId : 'buttonSelector'
}
var button = Ext.ComponentQuery.query('#buttonSelector');
if(button.length) button[0].disable();
Keep in mind that the ComponentQuery utility returns an array of items (even if you make your itemId unique). Here's a simple fiddle / demonstration.
In response to your comment, there may be confusion in regards to what the buttons config actually does - according to the docs it is shorthand for the following:
dockedItems: [{
xtype: 'toolbar',
dock: 'bottom',
ui: 'footer',
defaults: {minWidth: minButtonWidth},
items: [
{ xtype: 'component', flex: 1 },
{ xtype: 'button', text: 'Button 1' }
]
}]
... this creates an extra "step" in the hierarchy which you must account for in a query. For example, if your form had an itemId of formId you could try something like:
Ext.ComponentQuery.query('#formId toolbar #myButtonId')[0].disable();
I've updated your fiddle to demonstrate this.