In an antd table I am trying to use the columnWidth property in expandable to set the column width as the minimum. In my table the width for the expandable icon column is very big and by default it's quite large for me. I've tried giving a string | number as said so in the documentation but it doesn't seem to work. Is there any other way to set it to a minimum?
expandable={{expandedRowRender: record => <p style={{ margin: 0 }}></p>,
columnWidth: 1,
expandRowByClick: true,
}}
I've tried to use style and margin as 0 but even that isn't making a difference and columnWidth doesn't seem to work.
Related
Is there any way to set columns width to match the width of the max length content? I want to make the first column that shows the counter of the row to autosize the width and not style it with text-overflow: ellipsis; which seems to be the default behavior.
See below screenshot regarding the first column:
Any idea would be helpful. Also new to ExtJs framework.
You can use the flex config. It's kinda a weighted value and lets you tell the container how much of the total area you'd like to give that component.
So, say you have 4 columns and you set each flex config to 1, they each get 1/4 of the total width.
Set the first column to flex: 1 and all the other flex: 2. Or set all the other columns to flex: 1 and the first column to flex: 0. Just play around with the value until you get the look you want.
Hope this helps.
I am working with React Suite's Grid to display university course data in a calendar format. The grid works great, other than the cell heights not being uniform: An image example of my Grid UI
Here is the code I currently have for the grid:
<Grid
style={{
width: "100%",
height: "100%",
}}
data-testid="grid"
>
{this.state.data.map((c) => (
<Row>
{c.map((e) => (
<Col className="display-linebreak" style={this.formatCell(e)}>{e}</Col>
))}
</Row>
))}
</Grid>
Is there any way to make the height of all cells consistent across their respective row, while still making the grid flexible enough for data intake of a variable number of dates and times? One way I tried to do this is by adding {{ height: "100%" }} as inline style for the Row, but I quickly realized that this or any similar approach will not work, as ultimately it is the cell height that needs to conform to a dynamic row height, based on the automatic heights of the other cells. Another thing I considered is that it may be easier to isolate a cell with respect to a Row if Column is the parent component to Row instead of the other way around, but I don't think this is possible in React Suite Grid.
Basically, my conundrum is, how can the cell know how tall it has to be if there are cells in the row that have not been rendered yet? Is it possible to go back and update the height post-render if a taller cell is found? How does a cell even know which row it is in?
Any tips or insight is greatly appreciated, I am happy to clarify anything or answer questions about it. Thank you in advance!
I did it with adding flex to the rs-row:
.rs-row{
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
Then you can add height 100% to the cols or cards elements inside of them.
I'm doing a custom table with React Table & Typescript and I did when selecting a row on a checkbox it must change the checkbox and update the background color for the ones that are selected.
The problem is when I select the row for the first time, it works as expected but then when I click it again it doesn't update the background color. I'm using the property of row.isSelected to put the background color.
<Tr
{...row.getRowProps()}
style={{
backgroundColor: !row.isSelected ? "none" : "#E9D8FD",
}}
The list is being updated correctly but the background color doesn't.
I'm missing something ?
"none" is not a valid color. You may want to use "transparent" instead.
i'm working on Kendo react grid and a set reorderable={true} to make the columns reordering.
Now i want to save the new order and i don't found a solution what event should i use to detect when the column move
<Grid
pageable={paginationConfig}
reorderable={true}
sortable
filterable
resizable
style={{ height: '600px', overflow: 'auto' }}
>......</Grid>
can somebody help me please.
See onColumnReorder in the Documentation. Where you store it is the next question... State, store, local storage etc...
I'm using Material-table in my project and I'd like to apply a max-width to every column. I want to do that because the specific column is misconfiguring my table.
For example if I do, max-width: '150px' in that column, I get this below. The text overrides everything.