How to make Material-UI Datatable responsive to window size

2019-08-14 18:09 user2892804 imported from Stackoverflow

I am using MUIDatatables and the table is not responsive to the window screen. I want the table to always have one line per row, and use horizontal scroll.

I have tried putting the table inside a Material UI Grid component and Grid Component but that isn't working or I might not be configuring it correctly.

This is where I house all my components

    <ThemeProvider theme={theme}>
      <div className={classes.root}>
        <CssBaseline />
        <nav className={classes.drawer}>
          <Hidden xsDown implementation="js">
            <Navigator open={this.state.drawerOpen} PaperProps={{ style: { width: drawerWidth } }} />
          </Hidden>
        </nav>
        <div className={classes.appContent}>
          <Header onDrawerToggle={this.handleDrawerToggle} />
          <main className={classes.mainContent}>
            <div>
              <Switch>
                <Route exact path="/EditContracts/:contractId/sections/:section" component={EditSection} />
                <Route exact path="/EditContracts/:contractId" component={EditContract} />
                <Route exact path="/EditUsers/:userId" component={EditUser} />
                <Route exact path="/EditEndpoints/:epId" component={EditEndpoint} />
                <Route exact path="/EditTunnels/:tunnel_id" component={EditTunnel} />
                <Route exact path="/EditContracts/:contractId/addSection" component={CreateSection} />
                <Route exact path="/Contracts/List" component={Contracts} />
                <Route exact path="/Contracts/Create" component={CreateContract} />
                <Route exact path="/Tunnel_Profiles/Create" component={CreateTunnel} />
                <Route exact path="/Contracts/Import" component={ImportContract} />
                <Route exact path="/Users/List" component={Users} />
                <Route exact path="/Tunnel_Profiles/List" component={TunnelProfiles} />
                <Route exact path="/Users/Create" component={CreateUser} />
                <Route exact path="/Endpoints/Create" component={CreateEndpoint} />
                <Route exact path="/Endpoints/List" component={Endpoints} />
                <Route exact path="/Community" component={PugCommunity} />
                <Route exact path="/Connections" component={Connections} />
                <Route exact path="/Dashboard" component={Dashboard} />
                <Route exact path="/Alerts" component={Alerts} />
                <Route exact path="/System_Setup/Organization" component={Organization} />
                <Redirect exact from="/System_Setup" to="/System_Setup/Organization" />
                <Redirect exact from="/Users" to="/Users/List" />
                <Redirect exact from="/Tunnel_Profiles" to="/Tunnel_Profiles/List" />
                <Redirect exact from="/Endpoints" to="/Endpoints/List" />
                <Redirect exact from="/Contracts" to="/Contracts/List" />
              </Switch>
            </div>
          </main>
        </div>
      </div>
    </ThemeProvider>
  </div>

How I have table set up

    <Grid container direction='row'>
        <Grid item>
            <MUIDataTable data={data123} columns={columns123} options={options}/>
        </Grid>
    </Grid>

See also questions close to this topic

How to download a full size Instagram profile picture via API

Does someone know how to download a fullsize instagram profile picture via the instagram api?

How to use javascript to replace true/false value in html table with a checkbox

I have an array of javascript objects, that I'm using to dynamically populate an html table. I iterate through each objects and all is good. However, one of the keys has a value of true/false, and I need to replace the value with a checkbox for each object in the array. How can I do that?

The checkbox need to be ticked for false and unticked for true, also the checkboxes needs to be disabled, as we don't want a user interaction.

<h2>Products</h2>

  <div class="table-wrapper">
    <table id="display-table"class="fl-table">
      <thead>
        <tr>
          <th>Product Name</th>
          <th>Units In Stock</th>
          <th>Unit Price</th>
          <th>Discontinued</th>
        </tr>
      </thead>
      <tbody id="table-data">

      </tbody>
    </table>
  </div>

// Draw table from 'products' array of objects 
function drawTable(tbody) { var tr, td; 
  tbody = document.getElementById(tbody);  
  for (var i = 0; i < products.length; i++) // loop through data source
     { tr = tbody.insertRow(tbody.rows.length); 
      td = tr.insertCell(tr.cells.length); 
      td.innerHTML = products[i].ProductName; 
      td = tr.insertCell(tr.cells.length); 
      td.innerHTML = products[i].UnitsInStock; 
      td = tr.insertCell(tr.cells.length); 
      td.innerHTML = products[i].UnitPrice; 
      td = tr.insertCell(tr.cells.length); 
      td.innerHTML = products[i].Discontinued; 
      td = tr.insertCell(tr.cells.length);
      td.innerHTML = document.createElement('button'); 
    } } 

drawTable('table-data')

how to call javascript function in ejs template?

I have a javascript function defined under in ejs template and would like to call this function when form is submitted

But it is not calling checkPassword function.

Is there anything I missed here?

register.ejs

<html>
<head>
    <script type="text/javascript">
        function checkPassword() 
        {
            console.log("=============");
            const password = document.getElementsByName('password').value;
            console.log(password);
            console.log(form);
            return true;
        }
    </script>       
</head>
<body>
    <form  onSubmit="return checkPassword()">
    ... <-- get password and password confirm input
    <button class="btn btn-lg btn-info mt-4">Sign Up</button>
    </form>

Bootstrap 4: Variable-sized but auto-maximizing content in Grid
I'm utilizing a couple of C3 charts in a BS4 grid, which is originally laid out like this, with a 400px-fixed chart to the left, and width-undefined (intended to fill the remaining space) chart to the right:
```
---row--- ---row--- ---row--- ---row---
| fixed |           variable
|  pie  |             bar
| chart |            chart
---row--- ---row--- ---row--- ---row---
```
Now, this is all great when the page loads, or I increase the size of the window horizontally - the variable bar chart just grows, because C3 will auto-fill the available space (great!).

However, when I reduce the size of the window horizontally, the following happens:
```
---row--- ---row--- ---row--- ---row---
| fixed |           
|  pie  |           //nothing//  
| chart |            
---row--- ---row--- ---row--- ---row---
               variable
<---             bar                -->
                chart
---row--- ---row--- ---row--- ---row---
```
The window reduction causes the current size of the C3 variable bar chart to no longer fit in the prior space, causing BS4 to move the content to the next row, which then causes C3 to maximally expand into the entire row. What I want though, is for the chart to horizontally expand/reduce while staying fixed in the row it was "assigned" to, except when the total width is below a certain mobile threshold.

I looked through the BS4 docs but wasn't able to make out anything that really works for this example. Any ideas?
Css Selector has specific attribute?
I need to click the checkboxes from a collection if they are not checked by default as well some other conditions. And backward too. So, i need to find out if the CSS selector has checked attribute or not. How can i write java code/ css selector for that? HTML code is as below:
```
<input name="name1" checked="checked" id="id1" type="checkbox" value="true">
```
I have severals elements which i can define as List elements. But from that list, How can i find out which element is already checked??? I know i can define webelements for only checked elements. But in that case, i will loose the options to check uncheck. I am looking for something like this:
```
boolean boolV = chkboxes.get(i).hasAttribute("checked"); 
```
Or some other way???

CSS / HTML - How Can I align html elements printed in a loop?

I'm printing a loop dynamically in a col-3. Each column contains 4 html elements.

An Image
A Title
Some text content
A button

Is it possible to make each elements top, line up with each other regardless of how many lines the element on top is?

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
      <div class="col-3">
        <h2 class="pb-4">Title1</h2>
        <p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</p>
      </div>
      <div class="col-3">
        <h2 class="pb-4">Title2</h2>
        <p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</p>
      </div>
      <div class="col-3">
        <h2 class="pb-4">Title3</h2>
        <p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</p>
      </div>
      <div class="col-3">
        <h2 class="pb-4">Title <br> 4</h2>
        <p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</p>
      </div>
  </div>
</div>

how to logout from react navigation stacknavigation nested components

i want to logout from a component inside a stacknavigator and the stacknavigator is inside a bottomtabsnavigator which is finally inside a stacknavigator that houses two switchnavigator

i tried this.props.navigation.navigate(component) and it failed and several other ways i am a bit stuck and frustrated any help will be greatly appreciated as i am new to react native and react navigation

const AddContactTab = createStackNavigator({
    AddContact: AddContactsActivity,
});
const ManageContactsTab = createStackNavigator({
    ManageContacts: ManageContactsActivity,
    viewContact: ViewSingleContactsActivity,
    editContacts: EditContactsActivity
});



const Tabs = createBottomTabNavigator({
    ManageContacts: ManageContactsTab,
    AddContact: AddContactTab
}, {
    tabBarOptions: {
         activeBackgroundColor:'#3F51B5',
        activeTintColor:'#ccc',
        showLabel:false,
        style: {
            backgroundColor:'white',
            color:'white'
          },
          tabStyle:{
          },

        //   labelStyle:{
        //     color:'white',
        //     fontWeight: 'bolder',
        //     fontSize: 14
        //   }
    },
    defaultNavigationOptions: ({ navigation }) => ({
        tabBarIcon: () => {
            const { routeName } = navigation.state;
            let tabName;
            tabName = routeName === 'AddContact' ? 'plus' : 'home';

            return  <Icon name={tabName} size={24} 

              color="grey" />


        }
    })
},

);
export default createAppContainer(Tabs);





const MainStack = createStackNavigator(
  {
    Home: { screen: HomeActivity },
    Register: {screen: RegistrationActivity}
  },
  {
      initialRouteName: 'Home',
  }
  );




  const AuthStack = createStackNavigator(
    {
      Dashboard: { screen: DashboardActivity },
    },
    {
        initialRouteName: 'Dashboard',
    }
    ); 


    const RootStack = createSwitchNavigator({
      initialLoading: InitialLoadingActivity,
      auth: AuthStack,
      all: MainStack,
    }, 
    {
      initialRouteName: 'initialLoading',
  });

now i want to logout from addcontactsactivity to the initialroute of the AuthStack stack navigator....please if i am not clear enough let me know so i can edit my question

Flatlist Not rendering - react native?

I have some issue with Flatlist, I have an array of objects I got them from DB,

and save them to state, now when I log the this.state.providers in render() method or in call back func after setState I got the vaild Object like this

[{username: "Test", key: "53HoDga6aYhHsV5pCi5sx6LGbx42"}]

but when I passed these object into data prop in <Flatlist data={this.state.providers} /> the flatlist not rendering!

but when I add the object in the data prop manualy like this

<Flatlist data={[{username: "Test One", key: "53HoDga6aYhHsV5pCi5sx6LGbx42"}]}

the flatlist work very will, But i'm sure the code Is correct because I added them into other project and work very well!!

Edit

when I pass tow object into the array the flatlist work!!

so how to handle it if I got one object from DB !

Code

import React, { Component } from "react";
import firebase from "react-native-firebase";
import Icon from "react-native-vector-icons/Ionicons";

import {
  View,
  Text,
  StyleSheet,
  FlatList,
  TouchableOpacity,
  Dimensions
} from "react-native";

class ListChats extends Component {
  constructor(props) {
    super(props);
    this.state = {
      providers: []
    };
  }
  _chatList = () => {
    let currentUser = firebase.auth().currentUser.uid;
    let ref = firebase.database().ref(`Messages/${currentUser}`);
    let providersKeys = [];

    ref.once("value").then(snapshot => {
      snapshot.forEach(childsnap => {
        console.log(childsnap.key);
        providersKeys.push(childsnap.key);
      });
      let usernames = [];
      providersKeys.forEach(key => {
        firebase
          .database()
          .ref("users")
          .child(key)
          .once("value")
          .then(providersShot => {
            let username = providersShot.val().username;
            usernames.push({ username: username, key: key });
          });
      });
      this.setState({ providers: usernames }, () =>
        console.log(this.state.providers)
      );
    });
  };
  componentDidMount() {
    this._chatList();
  }
  _listEmptyComponent = () => {
    return (
      <View style={styles.container}>
        <Text style={{ alignSelf: "center" }}>No Chats Found :O</Text>
      </View>
    );
  };

  render() {
    console.log(this.state.providers); // I got [{username: "Test", key: "53HoDga6aYhHsV5pCi5sx6LGbx42"}]
    return (
      <View style={{ flex: 1 }}>
        <FlatList
          key={Math.random() * 1000}
          data={this.state.providers}
          contentContainerStyle={{ flexGrow: 1 }}
          ListEmptyComponent={this._listEmptyComponent()}
          keyExtractor={item => item.key.toString()}
          renderItem={({ item }) => {
            console.log("item", item);
            return (
              <TouchableOpacity
                onPress={() =>
                  this.props.navigation.navigate("ChatDetails", {
                    Key: item.key,
                    providerName: item.username
                  })
                }
              >
                <View style={styles.parent}>
                  <Icon name="ios-contact" size={50} color="#4d8dd6" />
                  <View
                    style={{
                      flex: 1,
                      justifyContent: "flex-start",
                      alignItems: "flex-start",
                      marginHorizontal: 25
                    }}
                  >
                    <Text
                      style={{
                        color: "#000",
                        fontSize: 17
                      }}
                    >
                      {item.username}
                    </Text>
                  </View>
                  <Icon name="ios-chatboxes" size={25} color="#d6d6d6" />
                </View>
              </TouchableOpacity>
            );
          }}
          // keyExtractor={(item, index) => index.toString()}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1
  },
  parent: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    paddingVertical: 25,
    marginHorizontal: 15,
    borderBottomWidth: 1,
    borderBottomColor: "#eee"
  }
});

export default ListChats;

How to get React HighCharts to work with TypeScript?

I am trying to get the official React npm package for HighCharts to work. I am using TypeScript in my project and I get the following error when trying to use the charts.

Type 'HighchartsReact' is missing the following properties from type 'ElementClass': context, setState, forceUpdate, props, and 2 more. TS2605

I've tried using an example similar to what is listed as the TypeScript solution for the package.

https://www.npmjs.com/package/highcharts-react-official

import Highcharts from 'highcharts'
import HighchartsReact from 'highcharts-react-official'

class App extends React.Component<any, any> {
  private _dataOrderService: DataOrdering;
  private originalCars: Car [];

  constructor(props: any) {
    super(props);


    const options = {
      title: {
        text: 'My chart'
      },
      series: [{
        data: [1, 2, 3]
      }]
    }

    this.state = {
      cars: [],
      originalCars: [],
      ordering: ["Make", "Model", "Year"],
      originalOrdering: ["Make", "Model", "Year"],
      dealershipInfo: [],
      showAddCarModal: false,
      showColumnOrderModal: false,
      searchTerm: "",
      highChartOptions: options
    }
  }

  render() {
    return (
      <div className="App">
        <header className="App-header">
          <div id="chart">
          <HighchartsReact
            highcharts={Highcharts} 
            options={this.state.options}
          />
          </div>
</div>);
}

Here is the error I keep getting. Type 'HighchartsReact' is missing the following properties from type 'ElementClass': context, setState, forceUpdate, props, and 2 more. TS2605

I've already tried using this approach using the spread operator as suggested on the documentation for this package.

Example:

const App = (props: HighchartsReact.Props) => <div>
    <HighchartsReact
        highcharts={Highcharts}
        options={options}
        {...props}
    />
</div>

This above code segment still resulted in the same error occurring that I've described.

How do I apply site-wide styles for H1/H2/.. tags?
I used to do this:
```
import {createMuiTheme} from '@material-ui/core/styles';

export const theme = createMuiTheme({
  typography: {
    h1: {
      fontSize: '2.85em',
      margin: '0 0 16px', // <-- dies 
    },
    // ..
});
```
But the compiler dies saying margin isn't assignable to TypographyStyleOptions.
```
  TS2326: Types of property 'h1' are incompatible.
```
Type '{ fontSize: string; margin: string; }' is not assignable to type 'TypographyStyleOptions'. Object literal may only specify known properties, and 'margin' does not exist in type 'TypographyStyleOptions'.
It used to work before I updated some packages.

Applying styles per component doesn't work for me here because I need those styles in a markdown renderer, which doesn't output React components
Installing Material UI with SSR React

I am trying to import @material/ui core into a SSR React project. I have come across the following error

node_modules@babel\runtime\helpers\esm\objectWithoutProperties.js:1

I feel like I am missing some babel dependency but not sure which to install. Any suggestions on how to fix?

Thanks

Cannot read property 'have' of undefined when testing Material-UI Component with Jest and Enzyme

I am working on [Storybook] tutorial, but using Material-UI as a UI-Framework.
I have completed to the point where I have the Task and TaskList components available. I started working with writing test using Jest and enzyme, and this is where things started to shake up.

My test looks like

import React from "react";
import ReactDOM from "react-dom";
import TaskList from "./TaskList";
import { withPinnedTasks } from "../../stories/TaskList.stories";
import { MuiThemeProvider } from "@material-ui/core";
import { theme } from "../theme";
import { createMount } from "@material-ui/core/test-utils";

describe("SearchField", () => {
  let mount;
  beforeEach(() => {
    mount = createMount();
  });

  afterEach(() => {
    mount.cleanUp();
  });

  it("renders pinned tasks at the start of the list", () => {
    const div = document.createElement("div");
    const events = { onPinTask: jest.fn(), onArchiveTask: jest.fn() };

    let wrapper = mount(
      <MuiThemeProvider theme={theme}>
        <TaskList tasks={withPinnedTasks} {...events} />
      </MuiThemeProvider>
    );

    console.log(wrapper);

    // We expect the task titled "Task 6 (pinned)" to be rendered first, not at the end
    const lastTaskInput = wrapper.find('#id').to.have.lengthOf(1);

    // querySelector(
    //   '.list-item:nth-child(1) input[value="Task 6 (pinned)"]'
    // );
    expect(lastTaskInput).not.toBe(null);

    ReactDOM.unmountComponentAtNode(div);
  });
});

and when I run yarn test, it fails with the following error


  ● SearchField › renders pinned tasks at the start of the list

    TypeError: Cannot read property 'have' of undefined

      30 |
      31 |     // We expect the task titled "Task 6 (pinned)" to be rendered first, not at the end
    > 32 |     const lastTaskInput = wrapper.find('#id').to.have.lengthOf(1);
         |                           ^
      33 |
      34 |     // querySelector(
      35 |     //   '.list-item:nth-child(1) input[value="Task 6 (pinned)"]'

      at Object.it (src/components/TaskList.test.js:32:27)

The entire codebase is available at https://codesandbox.io/s/github/hhimanshu/storyboook-materialui-react/tree/jest

But since this is a failure in the test, if you are looking for the direct github link, you can find this at https://github.com/hhimanshu/storyboook-materialui-react/tree/jest

I am seeking help with following things
1. What all is incorrect in this code? I am learning to test using Jest and enzyme and would love to know what I need to learn
2. How can I test Material-UI custom themed components using MuiThemeProvider.

Thank you

Related questions

How to make Material-UI Datatable responsive to window size

See also questions close to this topic

Edit

Code