How do one hide/prevent a column from rendering in fluent-UI DetailsList component.
Define columns you would like to show, like in const mycolumns.
Notice how in example items have three properties - id, name, surname. However, DetailsList shows only id and name. It is because these columns were defined in const mycolumns.
ListWithHiddenColumns.tsx
import React from 'react';
import { DetailsList } from '#fluentui/react/lib/DetailsList';
export interface IListWithHiddenColumnsProps {}
export const ListWithHiddenColumns: React.FC<IListWithHiddenColumnsProps> = () => {
return (
<>
<DetailsList items={myitems} columns={mycolumns} />
</>
);
};
export const myitems = [
{ id: 1, name: 'Jane', surname: 'Oak' },
{ id: 1, name: 'John', surname: 'Smith' }
];
export const mycolumns = [
{
key: 'id',
name: 'Id',
fieldName: 'id',
minWidth: 50,
maxWidth: 50,
isResizable: false
},
{
key: 'name',
name: 'Name',
fieldName: 'name',
minWidth: 100,
maxWidth: 200,
isResizable: true
}
];
Related
I've been going through HighStock API to try and find which config and options I need to pass to the ChartView component in react-native-highcharts to draw my graph. I'm having a hard time finding what combination of config and options will get my desired result, things like series, dataGrouping, etc... . My data is a 2 dimensional array with 4 values for OHLC. My desired result is the photo at the top of this stackoverflow.
Here is my code so far.
class OHLC extends React.Component {
static navigationOptions = ({ navigation }) => ({
title: "OHLC",
headerLeft: (
<TouchableOpacity
style={NavStyles.headerButton}
onPress={() => navigation.openDrawer()}>
<Icon name="bars" size={20} />
</TouchableOpacity>
),
})
render() {
var Highcharts='Highcharts';
var conf={
title: {
text: 'Stock Name'
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150
},
yAxis: {
title: {
text: 'Price'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
// tooltip: {
// formatter: function () {
// return '<b>' + this.series.name + '</b><br/>' +
// Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
// Highcharts.numberFormat(this.y, 2);
// }
// },
legend: {
enabled: false
},
// exporting: {
// enabled: false
// },
series: [{
type: 'ohlc',
name: 'AAPL Stock Price',
data: (function () {
let arrays = aExtractFromJson(data,'data', null,null);
arrays = ohlcExtractor(arrays);
return arrays;
// look at toFixed method for number to limit decimal point
}()),
dataGrouping: {
units: [[
'week', // unit name
[1] // allowed multiples
], [
'month',
[1, 2, 3, 4, 6]
]]
}
}]
};
const options = {
global: {
useUTC: false
},
lang: {
decimalPoint: ',',
thousandsSep: '.'
}
};
return (
<View>
<ChartView style={{height:300}} config={conf} options={options} stock={true} ></ChartView>
//To see if anything gets rendered.
<Text>HELLO DAVID!</Text>
</View>
);
}
}
After further research, I was able to find the config and options needed to create an OHLC Graph using the ChartView component in react-native-highcharts. I encountered some issues with rendering a blank screen so I added javaScriptEnabled={true} domStorageEnabled={true} originWhitelist={['']} to my ChartView.
In the config the essentials:
series with type: 'ohlc' and data: [[1,2,3,4],[2,3,4,5]] inside.
In options, no arguments are required, I left it as options='' in the ChartView.
Don't forget to add stock={true} in ChartView
My code, basic example:
import React, {Component} from 'react';
import {View} from 'react-native';
import ChartView from 'react-native-highcharts';
class OHLC extends React.Component {
constructor(props) {
super(props);
}
render() {
var Highcharts='Highcharts';
var conf={
chart: {
animation: Highcharts.svg, // don't animate in old IE
marginRight: 10,
},
title: {
text: 'Live random data'
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150
},
yAxis: {
title: {
text: 'Value'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
series: [{
type: 'ohlc',
name: 'Random data',
/*Open, high,low,close values in a two dimensional array(two days)*/
data: [[1,2,3,4],[2,3,4,5]],
}]
};
return (
<View style={{borderRadius: 4, marginTop: 30,}}>
<ChartView style={{height:500}} config={conf} javaScriptEnabled={true} domStorageEnabled={true} originWhitelist={['']} stock={true} options=''></ChartView>
</View>
);
}
}
I'd like to be able to have fixed widths in my react table. I'm using this library material-table
import React from "react";
import MaterialTable from "material-table";
import ReactDOM from "react-dom";
import "./styles.css";
function App() {
return (
<MaterialTable
columns={[
{ title: "Name", field: "name" }, // 100px
{ title: "Surname", field: "surname" }, // set to 100px
{ title: "Birth Year", field: "birthYear", type: "numeric" }, // fill rest of row space
]}
data={[
{ name: "Mehmet", surname: "Baran", birthYear: 1987, birthCity: 63 },
{
name: "Zerya Betül",
surname: "Baran",
birthYear: 2017,
birthCity: 34
}
]}
title="Basic"
options={{
toolbar: false,
paging: false
}}
/>
);
}
Looks like you can use the headerStyle prop to set the widths.
import React from "react";
import MaterialTable from "material-table";
import ReactDOM from "react-dom";
import "./styles.css";
function App() {
return (
<MaterialTable
columns={[
{ title: "Name", field: "name", headerStyle: {width: "100px"} },
{ title: "Surname", field: "surname", headerStyle: {width: "100px"} },
{ title: "Birth Year", field: "birthYear", type: "numeric" },
]}
data={[
{ name: "Mehmet", surname: "Baran", birthYear: 1987, birthCity: 63 },
{
name: "Zerya Betül",
surname: "Baran",
birthYear: 2017,
birthCity: 34
}
]}
title="Basic"
options={{
toolbar: false,
paging: false
}}
/>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
Can anyone please let me know how to filter a DetailsList? For instance, let’s say I have the following list:
list
How do I filter the list such that when I type “Reject”, it will only show items with Status “Reject”
Here is the code I tried (from the documentation https://developer.microsoft.com/en-us/fabric#/components/detailslist):
private _onChangeText = (text: any) => {
this.setState({ items: text ? this.state.items.filter(i =>
i.Status.indexOf(text) > -1) : this.state.items });
}
<TextField
label="Filter by name:"
onChanged={this._onChangeText}
/>
Thanks!
Here's a Codepen where I'm filtering a collection of items to see if the text is present in any of the item's values (case-insensitive). It is similar to the documentation example you linked in your original question. I hope that helps!
let COLUMNS = [
{
key: "name",
name: "Name",
fieldName: "Name",
minWidth: 20,
maxWidth: 300,
},
{
key: "status",
name: "Status",
fieldName: 'Status',
minWidth: 20,
maxWidth: 300
}
];
const ITEMS = [
{
Name: 'xyz',
Status: 'Approve'
},
{
Name: 'abc',
Status: 'Approve'
},
{
Name: 'mno',
Status: 'Reject'
},
{
Name: 'pqr',
Status: 'Reject'
}
]
const includesText = (i, text): boolean => {
return Object.values(i).some((txt) => txt.toLowerCase().indexOf(text.toLowerCase()) > -1);
}
const filter = (text: string): any[] => {
return ITEMS.filter(i => includesText(i, text)) || ITEMS;
}
class Content extends React.Component {
constructor(props: any) {
super(props);
this.state = {
items: ITEMS
}
}
private _onChange(ev: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>, text: string) {
let items = filter(text);
this.setState({ items: items });
}
public render() {
const { items } = this.state;
return (
<Fabric.Fabric>
<Fabric.TextField label="Filter" onChange={this._onChange.bind(this)} />
<Fabric.DetailsList
items={ items }
columns={ COLUMNS }
/>
</Fabric.Fabric>
);
}
}
ReactDOM.render(
<Content />,
document.getElementById('content')
);
I use DropDownMenu and take a reference from official doumcn https://shoutem.github.io/docs/ui-toolkit/components/dropdown-menu
I want to set two DropDownMenu the first is for zone and the second is for city, if user select the zone like East the second DropDownMenu should set the value E1、E2
Here is my code:
import React, { Component } from 'react';
import { View } from 'react-native';
import { DropDownMenu, Text } from '#shoutem/ui';
class TestConfirm extends Component {
constructor(props) {
super(props);
this.state = {
zone: [
{
id: 0,
brand: "North",
models:
{
model: "Audi R8",
image: {
url: "https://shoutem.github.io/img/ui-toolkit/dropdownmenu/Audi-R8.jpg"
},
description: "North Description"
},
children: [{
name: "N1",
id: 10,
},{
name: "N2",
id: 17,
}]
},
{
id: 1,
brand: "West",
models: {
model: "Chiron",
image: {
url: "https://shoutem.github.io/img/ui-toolkit/dropdownmenu/Chiron.jpg"
},
description: "West Description"
},
children: [{
name: "W1",
id: 10,
},{
name: "W2",
id: 17,
}]
},
{
id: 2,
brand: "East",
models: {
model: "Dodge Viper",
image: {
url: "https://shoutem.github.io/img/ui-toolkit/dropdownmenu/Dodge-Viper.jpg"
},
description: "East Description"
},
children: [{
name: "E1",
id: 10,
},{
name: "E2",
id: 17,
}]
},
],
}
}
render() {
const selectedZone = this.state.selectedZone || this.state.zone[0];
console.log('selectedZone =>');
console.log(selectedZone);
console.log('selectedZone.children =>');
console.log(selectedZone.children);
return (
<Screen>
<DropDownMenu
styleName="horizontal"
options={this.state.zone}
selectedOption={selectedZone ? selectedZone : this.state.zone[0]}
onOptionSelected={(zone) => this.setState({ selectedZone: zone })}
titleProperty="brand"
valueProperty="cars.model"
/>
<Text styleName="md-gutter-horizontal">
{selectedZone ?
selectedZone.models.description :
this.state.zone[0].models.description}
</Text>
<DropDownMenu
styleName="horizontal"
options={selectedZone.children}
selectedOption={selectedZone ? selectedZone : this.state.zone[0].children}
onOptionSelected={(city) => this.setState({ selectedZone: city })}
titleProperty="name"
valueProperty="cars.model"
/>
</Screen>
);
}
}
export default TestConfirm;
Here is my screen look like this:
If i select East it will show error
Invalid `selectedOption` {"id":2,"brand":"East","models":{"model":"Dodge Viper","image":{"url":"https://shoutem.github.io/img/ui-toolkit/dropdownmenu/Dodge-Viper.jpg"},"description":"East Description"},"children":[{"name":"E1","id":10},{"name":"E2","id":17}]}, DropDownMenu `selectedOption` must be a member of `options`.Check that you are using the same reference in both `options` and `selectedOption`.
I check my console.log will look like this:
The key children under the name is what i want to put it into my second DropDownMenu
I have no idea how to do next step. Any help would be appreciated.
Thanks in advance.
selectedOption property for the DropDownMenu component expects a single object but this.state.zone[0].children is an array. You can change it to this.state.zone[0].children[0] to fixed the problem.
Also when you change the city dropdown you are updating the zone value in state. This will cause a bug. Try fixing it with setting a different value in state and checking that value for the city dropdown
Sample
render() {
const { zone, selectedZone, selectedCity } = this.state
return (
<Screen>
<DropDownMenu
styleName="horizontal"
options={zone}
selectedOption={selectedZone || zone[0]}
onOptionSelected={(zone) =>
this.setState({ selectedZone: zone, selectedCity: zone.children[0] } )
}
titleProperty="brand"
valueProperty="cars.model"
/>
<Text styleName="md-gutter-horizontal">
{selectedZone ?
selectedZone.models.description :
this.state.zone[0].models.description}
</Text>
<DropDownMenu
styleName="horizontal"
options={selectedZone ? selectedZone.children : zone[0].children } // check if zone selected or set the defaul zone children
selectedOption={selectedCity || zone[0].children[0] } // set the selected city or default zone city children
onOptionSelected={(city) => this.setState({ selectedCity: city })} // set the city on change
titleProperty="name"
valueProperty="cars.model"
/>
</Screen>
);
}
so I started to build a new app with react native and mobx.
I have a flat list component that gets his state data from the mobx store list. and when i'm adding new item to the mobx list, it won't re render the flat list view.
here is my code:
List Component:
#inject('TravelStore')
#observer
class TripsList extends Component {
constructor(props) {
super(props);
this.state = {
trips_list: props.TravelStore.trips_list
}
};
// set the navigation bar options
static navigationOptions = ({ navigation }) => {
const { params = {} } = navigation.state;
return {
title: 'Your Trips',
headerRight: (
<Button transparent primary onPress={ params.addNewTrip }>
<Icon name='ios-add' />
</Button>
)
};
};
// connect between component functions to header
componentDidMount() {
this.props.navigation.setParams({
addNewTrip: this._addNewTrip.bind(this),
});
}
_addNewTrip() {
this.props.TravelStore.addNewTrip('bla')
}
_renderListItem({ item }) {
return (
<TripsListItem details={item} navigation={this.props.navigation}/>
);
};
render() {
return (
<Container>
<FlatList
data = {this.state.trips_list}
renderItem = {this._renderListItem.bind(this)}
keyExtractor={(item, index) => index}
/>
</Container>
);
};
}
mobx store:
class ObservableTravelListStore {
#observable trips_list = [
{
name: 'to denver',
trip_cost: 400,
buying_list: [
{ name: 'pizza', price: 10 },
{ name: 'burger', price: 40 },
{ name: 'ipad', price: 44 },
{ name: 'bus', price: 45 },
]
},
{
name: 'to yafo',
trip_cost: 30,
buying_list: [
{ name: 'na na na', price: 10 },
{ name: 'burger', price: 40 },
]
},
{
name: 'to tel aviv',
trip_cost: 50,
buying_list: [
{ name: 'na na na', price: 10 },
{ name: 'no no no', price: 40 },
]
},
]
#action addNewTrip (trip_data) {
this.trips_list.push({
name: 'newTrip',
trip_cost: 6060,
buying_list: [
{ name: 'na na na', price: 10 },
{ name: 'burger', price: 40 },
]
})
console.log(this.trips_list[3])
}
}
const TravelStore = new ObservableTravelListStore()
export default TravelStore
any idea why the TripsList component won't rerender when addNewTrip function is called?
the problem is that you are not listening to the real observable but to a copy of it, you save in state in the constructor.
<FlatList
data = {this.state.trips_list}//change this
renderItem = {this._renderListItem.bind(this)}
keyExtractor={(item, index) => index}
/>
<FlatList
data = {this.props.TravelStore.trips_list}//change to this
renderItem = {this._renderListItem.bind(this)}
keyExtractor={(item, index) => index}
/>
the render function is like autobind of mobx and react to changes in the observable if it's a render function of an observer
if you want to react to inner changes in the items of the list,
you should add an observable scheme and this should do the trick,
something like this:
class TripModel {
#observable name = ''
#observable trip_cost = 0
#observable buying_list = []
constructor(name, cost, buy_list){
this.name = name
this.trip_cost = cost
this.buying_list = buy_list
}
/* class functions*/
}
class ObservableTravelListStore {
#observable trips_list = [
new Trip(
'to denver',
400,
[
{ name: 'pizza', price: 10 },
{ name: 'burger', price: 40 },
{ name: 'ipad', price: 44 },
{ name: 'bus', price: 45 },
]
),
new Trip(
'to yafo',
30,
[
{ name: 'na na na', price: 10 },
{ name: 'burger', price: 40 },
]
),
new Trip(
'to tel aviv',
50,
[
{ name: 'na na na', price: 10 },
{ name: 'burger', price: 40 },
]
)
]
#action addNewTrip (trip_data) {
this.trips_list.push(new Trip(
'newTrip',
6060,
[
{ name: 'na na na', price: 10 },
{ name: 'burger', price: 40 },
]
))
}
}
const TravelStore = new ObservableTravelListStore()
export default TravelStore
this is just better planning for reactive apps, so on change to inner content of the items in the list you will react to this change
hope that helps
Its an old post, but I also got stuck with something similar recently. Adding extraData in Flatlist prop list helped me.
<FlatList
data = {this.props.TravelStore.trips_list}
renderItem = {this._renderListItem.bind(this)}
keyExtractor={(item, index) => index}
extraData={this.props.TravelStore.trips_list.length} // list re-renders whenever the array length changes
/>
And as #Omri pointed out, you shouldn't be storing the observable in the Component state but make changes to it directly.