I put rowClassName,
rowClassName={({ expanded }) => (expanded ? 'blue' : 'red')}
.blue {
background-color: blue;
}
.red {
background-color: red;
}
which should check if the row is expanded (similar to icon icon). However, the style is not dynamic and is only applied once.
Here is the complete code snippet of the table:
<Table
columns={columns}
rowClassName={({ expanded }) => (expanded ? 'blue' : 'red')}
expandable={{
expandedRowRender,
rowExpandable: (record) => record.name !== 'Not Expandable',
expandIcon: ({ expanded, onExpand, record }) =>
expanded ? (
<DownOutlined style={{ color: '#BAB3BC' }} onClick={(e) => onExpand(record, e)} />
) : (
<RightOutlined style={{ color: '#BAB3BC' }} onClick={(e) => onExpand(record, e)} />
),
}}
dataSource={data}
/>
The result:
Related
I'm very new to react draggable and beaitiful-dnd, I want to be able to drag my table headers around, which I managed! But the styling "pops out" while an item is selected like so:
the item that is being dragged it seems to change the size of the entire table until I place it down again. I'm not sure what property I should add/change for the table to stay put while the item itself is being moved around? Here's the code for the movable header:
// React-Beautiful-dnd code
const getItemStyle = (isDragging, draggableStyle) => ({
userSelect: "none",
paddingBottom: 8,
// change background colour if dragging
background: isDragging ? "grey" : "none",
// styles we need to apply on draggables
...draggableStyle
});
class EnhancedTableHead extends React.Component {
render() {
const { columnData, handleReorderColumnData } = this.props;
return (
<DragDropContext onDragEnd={handleReorderColumnData}>
<TableHead>
<TableRow
component={Droppable}
droppableId="droppable"
direction="horizontal"
sx={{ padding: 0 }}
>
{(provided, snapshot) => (
<tr
key={snapshot.toString()}
ref={provided.innerRef}
{...provided.droppableProps}
>
{columnData.map((item, index) => (
<Draggable
key={item.id}
draggableId={item.id}
index={index}
>
{(provided, snapshot) => (
<TableCell
ref={provided.innerRef}
{...provided.draggableProps}
{...provided.dragHandleProps}
style={getItemStyle(snapshot.isDragging, {
...provided.draggableProps.style,
width: '10%',
paddingTop: ".25rem"
})}
padding="checkbox"
sx={{ borderStyle: "solid", borderWidth: '1px 2px 1px 0px', borderColor: 'rgba(0, 0, 0, 0.2)' }}
key={item.id}
>
{item.label}
</TableCell>
)}
</Draggable>
))}
{provided.placeholder}
</tr>
)}
</TableRow>
</TableHead>
</DragDropContext>
);
}
}
this is based on a codesandbox I found with draggable headers. Did I accidentally remove an important styling?
New discovery:
turns out if I add display: 'inline-block' to getItemStyle it doesn't shift things around... but my table header becomes tiny instead of filling up the actual width of the table like this:
what do I need to set?
I am attempting to render a custom Table component in React that will render [ "linear"-looking ] sub-tables, if and only if the values of its object rows prop are themselves of type 'object'. To do this I have my parent Table component, that renders a child TableRow component, that then does the conditional rendering of either a SubTable component or a TableInnerSquare component.
So far it works perfectly for the base condition [ when the properties of the rows object are simple ], but when I try to render sub-tables, the TableRows overflow the width of their container and I can't figure out how to stop this from happening.
Table component:
function Table(props) {
const { rows, columns, tableWidth, rowHeight } = props;
// rows here should be an array of rows containing objects w/ properties keyed by column names
// columns should just be an array of column names
return (
<div className='g-table'
style={{
display: 'flex',
width: tableWidth,
flexDirection: 'column',
margin: '5% auto',
}}
>
<div className='column-id-container'
style={{
display: 'flex',
width: tableWidth,
height: rowHeight,
}}
>
{ columns.map((column,idx) => {
return (
<div className='column-id'
style={{
backgroundColor: 'lightblue',
border: '1px solid blue',
width: '100%',
overflow: 'hidden',
padding: '2%',
}}
key={idx}
>
{ column }
</div>
);
}) }
</div>
<div className='rows-container'>
{ rows.map((row,idx) => {
return (
<TableRow
key={idx}
row={row}
rowId={idx}
tableWidth={tableWidth}
rowHeight={rowHeight}
columns={columns}
/>
);
}) }
</div>
</div>
);
};
TableRow component:
function TableRow(props) {
const { columns, row, rowId, tableWidth, rowHeight } = props;
// row should be an object with keys for each column here;
// columns should be an array
console.log('columns:');
console.log(columns);
console.log('row:');
console.log(row);
return (
<div className='table-row'
style={{
display: 'flex',
width: tableWidth,
}}
>
{ columns.map((property,idx) => {
if (typeof (row[property]) === 'object') {
return (
<SubTable
dataObject={row[property]}
rowHeight={rowHeight} // so for the SubTablesTable the row should be an object of objects
key={idx}
/>
);
} else {
return (
<TableInnerSquare
innerData={row[property]}
rowHeight={rowHeight}
key={idx}
/>
);
}
}) }
</div>
);
}
SubTable:
function SubTable(props) {
const { dataObject, rowHeight } = props;
console.log('dataObject:');
console.log(dataObject);
return (
<div className='sub-table'
style={{
width: 'auto',
display: 'flex',
flex: '1',
}}
>
{ Object.entries(dataObject).map((entry,idx) => {
return (
<div className='sub-table-inner'
style={{
display: 'flex',
overflow: 'hidden',
}}
>
<TableInnerSquare
rowHeight={rowHeight}
innerData={entry[0]}
/>
<TableInnerSquare
rowHeight={rowHeight}
innerData={entry[1]}
/>
</div>
);
}) }
</div>
);
}
TableInnerSquare:
function TableInnerSquare(props) {
const { innerData, rowHeight } = props;
return (
<div
className='table-inner-square'
style={{
backgroundColor: 'gold',
border: '1px solid red',
height: rowHeight,
overflow: 'hidden',
padding: '2%',
width: '100%',
}}
>
{ innerData }
</div>
);
}
Any help figuring out how to restrict TableRows containing SubTables to having width tableWidth [ which like I said the TableRows containing TableInnerSquares already seem to do? ] would be appreciated!
You can set overflow: hidden on a div, but its parent divs will still recognize the content as present and grow to contain it. You need to set overflow: hidden on the div with class sub-table [ in component SubTable ] here, in order for the sub-tables to hide the overflows of their inner divs.
I am using Ant Design on my React.js application. I used Table component. I have two columns: one for an input number field, and another for input field and will be editable on hover. When I hover on each row, there is a flicker issue which does not happen if I have input number field only or an input field only. When I have them both, it is like having an extra margin top or padding. When I check the dev tools, there were no added styling. I even adjust its min-height but no effect.
Flickering issue when hovering on table row
const columns = [
{
render: (_, { id, value }, index) => {
if (editingRow === id) {
return (
<Form.Item
name="value"
style={{ margin: 0 }}
>
<div onBlur={() => setEditingRow(null)}>
<InputNumber
value={value}
onChange={numValue => {
onChange(
{ id, value: numValue },
);
}}
/>
</div>
</Form.Item>
);
} else {
return (
<Form.Item style={{ margin: 0 }}>
<Input value={value} disabled />
</Form.Item>
);
}
}
},
{
render: (_, { id, title }, index) => {
if (editingRow === id) {
return (
<Form.Item
name="value"
style={{ margin: 0 }}
>
<div onBlur={() => setEditingRow(null)}>
<Input
value={value}
onChange={event => {
event.persist();
onChange(
{ id, title: event.target.value },
);
}}
/>
</div>
</Form.Item>
);
} else {
return (
<Form.Item style={{ margin: 0 }}>
<Input value={value} disabled />
</Form.Item>
);
}
}
},
]
I want to make the line underneath 'Search' and the arrow on the right white but I can't figure out how to do it for the life of me. I've tried using styled on the .MuiAutocomplete-root css class but it didn't work. I can't figure out which CSS class to apply the color to. If I inspect it, it says that the class is MuiInput-root which I also tried with styled and that didn't work either.
Thanks
My code (copy pasted from the docs with some minor adjustments):
function sleep(delay = 0) {
return new Promise((resolve) => {
setTimeout(resolve, delay);
});
}
export default function AutocompleteSearch() {
const [open, setOpen] = useState(false);
const [options, setOptions] = useState([]);
const loading = open && options.length === 0;
useEffect(() => {
let active = true;
if (!loading) {
return undefined;
}
(async () => {
await sleep(1e3); // For demo purposes.
if (active) {
//api call then setOptions
}
})();
return () => {
active = false;
};
}, [loading]);
useEffect(() => {
if (!open) {
setOptions([]);
}
}, [open]);
return (
<Autocomplete
id="size-small-standard"
size="small"
sx={{
width: 300,
}}
open={open}
onOpen={() => {
setOpen(true);
}}
onClose={() => {
setOpen(false);
}}
isOptionEqualToValue={(option, value) => option.title === value.title}
getOptionLabel={(option) => option.title}
options={options}
groupBy={(option) => option.type}
loading={loading}
renderInput={(params) => (
<TextField
{...params}
variant="standard"
label="Search"
//makes label white
InputLabelProps={{
style: {color: '#fff'},
}}
InputProps={{
...params.InputProps,
//makes the selected option white when added to the box
sx: {color: '#fff'},
endAdornment: (
<>
{loading ? <CircularProgress color="inherit" size={20}/> : null}
{params.InputProps.endAdornment}
</>
),
}}
/>
)}
/>
);
}
Add color to the following CSS classes.
.MuiSvgIcon-root {
color: white;
}
.css-ghsjzk-MuiInputBase-root-MuiInput-root:before {
border-bottom-color: white !important;
}
.css-ghsjzk-MuiInputBase-root-MuiInput-root:after {
border-bottom-color: white !important;
}
Play around with the code here
I used red color in my codesandbox example so that it can be visible on white screen
I have a graph and I want to display a border around a text. My code works, but only 1 time for adding or removing the border, but my event MouseEnter/MouseLeave works multiple times. Why is this?
const Custom_border = (index) =>
{
data_utilisation.map((data_utilisation, index_1) =>
{
if(index == index_1)
{
console.log("In")
const add_border = document.getElementById(index)
return add_border.classList.add('nice_border')
}
})
return null
}
return <Cell cursor="pointer" key={`cell-${index}`} fill={colored[0]} onMouseEnter={() => Custom_border(index)} onMouseLeave={() => Custom_no_border(index)}/>
All the BarChart (Recharts API) :
<BarChart
width={400}
height={250}
data={data_utilisation}>
<CartesianGrid opacity={0.1} vertical={false} horizontal={false}/>
<XAxis axisLine={false} tickLine={false} stroke="#eeeeee00"/>
<YAxis axisLine={false} tickLine={false} stroke="#eeeeee00"/>
<Bar dataKey="uv" fill="#8884d8">
{
data_utilisation.map((data_utilisation, index) =>
{
if(data_utilisation.uv <= 5000)
{
return <Cell className="my_cell" cursor="pointer" key={`cell-${index}`} fill={colored[0]} onMouseEnter={() => Custom_border(index)} onMouseLeave={() => Custom_no_border(index)}/>
}
else if(data_utilisation.uv > 5000 && data_utilisation.uv <= 10000)
{
return <Cell cursor="pointer" key={`cell-${index}`} fill={colored[1]} onMouseEnter={() => Custom_border(index)} onMouseLeave={() => Custom_no_border(index)}/>
}
else
{
return <Cell cursor="pointer" key={`cell-${index}`} fill={colored[2]} onMouseEnter={() => Custom_border(index)} onMouseLeave={() => Custom_no_border(index)}/>
}
})
}
</Bar>
</BarChart>
The code for display a text next to the Barchart who i need to put the border on :
<div className="Text_1">
{
data_utilisation.map((data_utilisation, index) =>
{
if(data_utilisation.uv <= 5000)
{
return <p id={index} style={{ color: colored[0]}}>{data_utilisation.name} : {data_utilisation.uv}</p>
}
else if(data_utilisation.uv > 5000 && data_utilisation.uv <= 10000)
{
return <p id={index} style={{ color: colored[1]}}>{data_utilisation.name} : {data_utilisation.uv}</p>
}
else
{
return <p id={index} style={{ color: colored[2]}}>{data_utilisation.name} : {data_utilisation.uv}</p>
}})}
</div>
If I'm understanding your use case correctly, you want to show a border when the user hovers over a cell. You can achieve this with css, you just need to figure out how to select the Cell component. Let's assume it has a class name called my-cell, you could simply add the following css.
.my-cell:hover {
border: 1px solid black;
}
To figure out what the class name of the component is, you can inspect it on the dom, if it doesn't have one you can add it like this:
return <Cell className="my-cell" ... />