I know that 'disableColumnMenu' will disable the entire column, and setting 'sortable' and 'filterable' to false will remove those options for that column. Is there a way to disable specific menu options, or otherwise modify the column menu? I want to keep the columns sortable and filterable, but remove the 'show' and 'hide' options.
To remove the "Show"-columns and "Hide" menu items from the column menu, I just added the disableColumnSelector to the DataGrid Component as show in the code image below.
You can do this by creating a custom menu and only including the filter and sort menu options.
// Assuming other imports such as React...
import {
GridColumnMenuContainer,
GridFilterMenuItem,
SortGridMenuItems
} from '#material-ui/data-grid';
const CustomColumnMenu = (props) => {
const { hideMenu, currentColumn } = props;
return (
<GridColumnMenuContainer
hideMenu={hideMenu}
currentColumn={currentColumn}
>
<SortGridMenuItems onClick={hideMenu} column={currentColumn} />
<GridFilterMenuItem onClick={hideMenu} column={currentColumn} />
</GridColumnMenuContainer>
);
};
export default CustomColumnMenu;
Then, use it in your grid like so:
// Assuming imports are done including DataGrid, CustomColumnMenu, and React...
<DataGrid
// Assuming: rows, rowHeight, etc...
components={{
ColumnMenu: CustomColumnMenu
}}
/>
There is also a prop disableColumnSelector={true} (passed to DataGrid component), however it will disable column selection for all columns, not only 1 specific column header.
You can do this by using the hideable field in the columns definitions.
const columns: Array<GridColDef> = [
{
field: 'foo',
hideable: false
},
// ... other cols
]
<DataGrid columns={columns} rows={rows} />
Related
Hello guys I currently have a buttons like category. I want that when I click a button it will have a color, and when I click it again it will turn to it's original color which is white. When I click 2 button both will have dark color, then click again to remove single color.
this is my div when I'm adding a the category id
<div className={classes.scrollMenu}>
{categories.map((category) => {
return (
<>
<Button
key={category._id}
className={classes.button}
onClick={(e) => {
let values = {
price: [],
category: [category._id],
}
}}
>
{category.name}
</Button>
</>
)
})}
</div>
This is the image that when I click single button it will color one button.
Thank you
code Solution: https://codesandbox.io/s/stoic-meadow-y5cei?file=/src/App.js
App.js
import "./styles.css";
import React, { useState } from "react";
export default function App() {
let categories = ["one", "two", "three"];
const [activeFilter, setActiveFilter] = useState(["one"]);
const categoryOnClick = (category) => {
activeFilter.includes(category)
? removeCategory(category)
: setCategory(category);
};
const setCategory = (category) => {
setActiveFilter([...activeFilter, category]);
};
const removeCategory = (category) => {
const index = activeFilter.findIndex((cat) => cat === category);
activeFilter.splice(index, 1);
setActiveFilter([...activeFilter]);
};
return (
<div className="chip-list my-3">
{categories.map((category, index) => {
return (
<button
key={index}
className={`${activeFilter.includes(category) ? "active" : ""}`}
onClick={() => categoryOnClick(category)}
>
<span>{category}</span>
</button>
);
})}
</div>
);
}
css
.active {
background-color: black;
color: white;
}
check if this solution works for you
used useState hook to hold the state of buttons which you will select
.active class will apply to the button which is selected
On click of that button we will check if the button is already selected or not if selected removeCategory() function run
or if button is not selected then setCategory() function will run and it will update the state
if you need clarification please let me know thanks
Few tips to start with:
Fragment is unnecessary when wrapping single DOM element
Inline function initialisation inside a render is a bad thing. On each new re-render, it allocates extra client memory to newly initialised function. That means, for every map object you will have that many functions, that gets newly created and referenced on each reload
You can easily go with single line return statement of arrow function here. () => <hi> instead of () => { return <hi> }
As for solutions, there are quite a few ways to change button colour during execution. I will suggest the most simple (in my opinion) way to do it. Just have classname variable, then add subclass that will style button accordingly.
Example:
By default it has class name of .button, after click you simply add styling and it ends up having .button .button--red, all is left to do, declaration in css.
.button {
style button here
. . .
add additional stylings here
. . .
&.button--red { color: red }
}
As for how handler should look like, if that is what you asking. Button could be used in your new component let's say, named StyledButton or ColourfulButton that will have internal state to handle what kind of colour is represented.
I would like to add a 33% to the Wordpress Block "Button". So far it has 25%,50%,75% and 100%. Is it possible to insert my new value into the existing width selector?
I'm guessing Block Filters are the way to go.
I think I also found the way to get the settings object which might then help me to find out what I need to overwrite. However simply adding this code to my admin.js does not produce any output. Where would I need to load this?
const filterBlocks = (settings) => {
if (settings.name !== 'core/buttons') {
return settings
}
console.log(settings);
return settings;
}
Quick solution: Add a custom CSS class in the Buttons' block properties under "Advanced > Additional CSS class(es)" then define the custom width in your theme style.css
Detailed solution:
By using wp.hooks.addFilter() you can add a new control to the Button block with as many extra custom width options as you need. The Button blocks preset widths are defined within the function WidthPanel() of the blocks edit.js function:
function WidthPanel( { selectedWidth, setAttributes } ) {
...
return (
...
<ButtonGroup aria-label={ __( 'Button width' ) }>
{ [ 25, 50, 75, 100 ].map( ( widthValue ) => {
...
}
}
To add a new width value of 33% to the block, we need to add our own new button control to the InspectorControls and then use wp.hooks.addFilter() to add this to the existing core Button block, eg:
index.js
import { createHigherOrderComponent } from '#wordpress/compose';
import { Fragment } from '#wordpress/element';
import { InspectorControls } from '#wordpress/block-editor';
import { PanelBody, Button } from '#wordpress/components';
const withInspectorControls = createHigherOrderComponent((BlockEdit) => {
return (props) => {
const { setAttributes } = props;
let widthValue = 33; // must be a number
return (
<Fragment>
<BlockEdit {...props} />
<InspectorControls>
<PanelBody title="Custom Width">
<Button
key={widthValue}
isSmall
variant={widthValue}
onClick={() => setAttributes({ width: widthValue })}
>
{widthValue}%
</Button>
</PanelBody>
</InspectorControls>
</Fragment>
);
};
}, 'withInspectorControl');
wp.hooks.addFilter(
'editor.BlockEdit',
'core/button',
withInspectorControls
);
Next, a new additional css style needs to be added that (matches the existing width presets structure) for the new custom width, eg:
style.scss
$blocks-block__margin: 0.5em;
&.wp-block-button__width-33 {
width: calc(33.33% - #{ $blocks-block__margin });
}
And there you have it..
The easiest way to put all the code above together/working is to create your own Gutenberg block (and that in itself can be challenging if you aren't familiar with the process or ReactJS). I too have come across similiar challenges with Gutenberg, so I wanted to provide a detailed solution for this kind of issue that works.
What is the proper way to control the size of checkboxes in Fluent UI Northstar?
I have tried adjusting the font size and the height, but it only acts on the label, not the box itself. And I didn't find anything in the documentation.
If you want this to be a general styling that applies to all checkboxes rendered inside your provider, you can modify the checkbox component-style in the theme you pass into the provider.
Create your own theme, apply the styles you want and then merge it into the theme that you are currently using
Code snippet
import { Provider, teamsTheme, mergeThemes, ThemeInput } from '#fluentui/react-northstar';
const myTheme: ThemeInput = {
componentStyles: {
Checkbox: {
root: {
//will apply styles to the root-container component
},
checkbox: {
backgroundRepeat: "repeat",
},
label: {
//will apply styles to the label
},
}
}}
ReactDOM.render(
<Provider theme={mergeThemes(teamsTheme, myTheme)}>
<AppContainer>
<Component title={title} isOfficeInitialized={isOfficeInitialized} />
</AppContainer>
</Provider>,
document.getElementById('container')
);
the checkbox rendering issue in the picture is fixed by setting:
backgroundRepeat: "repeat"
I am using DayPickerInput and I have it set up like this (Range with 2 day picker inputs). I want to always display overlay and I don't want to hide it. I am aware of showOverlay prop but it only displays overlay during the initial rendering and the overlay can be closed. Once closed it won't be opened by default again. Is it possible to have overlay always displayed using DayPickerInput or I should use DayPicker with my own input fields?
This question is over 3 years old but in case someone stills looking for a way to do it now you can combine the props showOverlay and hideOnDayClick to have the overlay always on.
By doing something like this:
<DayPickerInput showOverlay hideOnDayClick={false} ... />
source - VERSION 7.4.8
If you're for some reason still looking for an answer, I found another tricky way of how to always show overlay.
What I've done is:
Created measuredRef that replaces default hideDayPicker method with noop:
const measuredRef = useCallback(node => {
if (node !== null) node.hideDayPicker = noop
}, [])
Passed this ref to DayPickerInput together with showOverlay prop:
<DayPickerInput ref={measuredRef} showOverlay ... />
After this manipulations you'll have overlay that is always shown.
Furthermore, if you need to control DayPickerInput state, you can:
Create useState:
const [isDatePickerOpen, setIsDatePickerOpen] = useState(false);
Use setIsDatePickerOpen the way you need (for example you want to hide overlay on day change):
<DayPickerInput
ref={measuredRef}
showOverlay
onDayChange={() => setIsDatePickerOpen(false)}
...
/>
Create custom OverlayComponent, pass it to DayPickerInput and control the way you show overlay:
const OverlayComponent = ({ children, classNames, selectedDay, ...props }) =>
(
<div
className={cn({
"is-open": isDatePickerOpen,
})}
{...props}
>
{children}
</div>
)
------------------------------
<DayPickerInput
ref={measuredRef}
showOverlay
onDayChange={() => setIsDatePickerOpen(false)}
overlayComponent={OverlayComponent}
...
/>
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.