Trying to apply pure JavaScript effects to React ant-table component - javascript

I am very new to React and have recently inherited a project that was created with create-react-app. The project is partially done and I want to make the columns of a particular table adjustable (the user should drag and adjust the width). The previous developers used ant-table to create the table, which has no such feature.
I figured I could try and do this using plain js, like this fiddle: http://jsfiddle.net/thrilleratplay/epcybL4v/
However, I cannot make it work. I have included the js code as a inside index.html, have also tried calling it inside the .js file of the component.
This is my component code:
import React, {Component, PropTypes} from 'react';
import {Icon} from 'antd';
import Table from '../../components/tables/AntdTable.pg';
class SampleScreen extends Component {
render(){
return (
<Table data={this.props.availableFlavors.map(this.props.generateFruitList)}
selectRow={this.props.selectRow}
headers={this.props.tableHeaders} />
);
}
}
SampleScreen.propTypes = {
availableFlavors : PropTypes.array.isRequired,
tableHeaders: PropTypes.array.isRequired,
selectRow: PropTypes.object.isRequired,
generateFruitList: PropTypes.func.isRequired,
};
export default SampleScreen;
I am not sure if this is even possible, again, please bear with a React noob here. Any help is greatly appreciated.

Check the examples at antd website on how to create tables.
Resizable column

Related

Is it possible to use different CSS libraries for different components in our react website?

For example, I have 3 components==> Home, About, Contact.
Is it possible to use material ui css library for Home component, semantic ui css library for About component and bootstrap for Contact Component.
If yes, then How?
Sure you can, I think the better question is if you should.
Mixing frameworks would likely lead to in inconsistent UX. That's something normally avoided for non-technical reasons.
Still, sometimes you need to transition things slowly, and might have different parts of your software look different.
When you're certain you actually want to mix different ui frameworks, just follow the regular 'get-started' guides for those frameworks.
here's a code-sandbox with both a mui-button and a bootstrap-button
import * as React from "react";
import * as ReactDOM from "react-dom/client";
import Button from "#mui/material/Button";
import { Button as BootstrapButton } from "react-bootstrap";
import "bootstrap/dist/css/bootstrap.min.css";
function App() {
return (
<>
<Button variant="contained">Hello World</Button>
<br />
<br />
<BootstrapButton variant="primary">Primary</BootstrapButton>
</>
);
}
ReactDOM.createRoot(document.querySelector("#app")).render(<App />);

Device specific style loading in react

I have an application in which I am using different views for mobile and desktop instead of going for responsive design. I am using server side rendering for my application.
Here is the code for browser starter file
import React from "react";
import App from "../shared/App";
import MobApp from "../shared/MobApp";
hydrate(<BrowserRouter>{__IS_MOBILE__ ? <MobApp /> : <App />}</BrowserRouter>
Here I render 'MobApp' component in case the site is loaded on mobile and 'App' in case the site is loaded on desktop.
Here is a dummy code for 'MobApp' component
import React,{ Component } from 'react';
import Header from './views/Mobile/layouts/Header';
import './MobApp.scss';
export class MobApp extends Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<Header />
</div>
);
}
}
export default MobApp
As it is clear I am using import for loading component level CSS. Now 'Header' component inside this has it's own CSS import.
Problem -
If someone opens the site on desktop view, the code for 'MobApp' imports like MobApp.scss and all it's child components like 'Header' is also included. As a result I am able to get the CSS of mobile components on desktop.
What all approaches can I use to avoid this?
I have read about conditional imports and will try them out but would like to know if there is something better out there.
Also, let me know if I need to change the way I am adding CSS to my components or is there a more scalable way to do the same to avoid any future problems.

Why my bottom sub-component is shown on top of a page?

I created a sandbox environment to show an issue.
Basically the problem is when I click "Option 1" in a main menu, a new component appears in which a bottom sub-component (called BottomControls.js) is showed in the top of a page instead of a bottom of a page.
Also the CardContent is white instead of backgroundColor: 'rgb(225, 0, 80)' as defined in styles.js.
It seems like styles are applied incorrectly in BottomControls.js. I passed styles as a parameter to BottomControls.js from a parent component Main.js.
Does anybody know what am I doing wrong?
There were two main issues with how you were trying to use your styles:
You weren't exporting anything from ./layout/single/styles.js
You weren't using withStyles to convert the JS object into CSS classes that you can use
Here's a CodeSandbox that fixes those main issues:
Changes to Main.js:
// added
import { withStyles } from "#material-ui/core/styles";
Changed export default class extends Component
to class Main extends Component
// added to end of Main.js
const StyledMain = withStyles(styles)(Main);
export default StyledMain;
Changed cases of mystyles={styles} to mystyles={this.props.classes} (the classes prop is injected by withStyles).
Then in styles.js I added export default styles; to the bottom.

Markdown rendering with React Components inside at build time

I have a very specific issue with Preact/React:
I have a .md file with some text, which uses react-router's <Link> tags inside for navigation. Like this:
## Heading
<Link to="/test">Let's go here</Link>
In my Component file, I render the Markdown and import the Link Component and pass the Link-components down, using the preact-markup component:
...
import {Link} from 'react-router-dom';
import text from './text.md';
import Markup from 'preact-markup';
export default class Comp extends Component {
render() {
return <Markup markup={text} components={{Link, HashLink}} />;
}
}
For importing the markdown, I use the #nuxtjs/markdown-it-loader, which works fine. It all works as expected, but doesn't feel clean.
I would like to be able to either import the Link components inside the markdown file, which would save me some boilerplate code for every view.
Or, even better, I would like to be able to write my markdown inside the Component itself, with the appropriate imports, and compile it all to HTML at build time.
I don't like runtime components since they need downloading and parse- and render time.

How to use JQuery UI components in Aurelia getting started app (navigation app)

I am able to run the Aurelia app by following the steps provided in getting started tutorial. They have used bootstrap nav-bar in the skeleton application. Is it possible to use JQuery UI components in the Aurelia app. If yes, please explain me how to achieve this.
Thanks in advance.
Yes, it's possible!
I've made a jQueryUI Tabs example for you:
tabs.html
<template>
<ul>
<li repeat.for="tab of tabs">
${tab.title}
</li>
</ul>
<div repeat.for="tab of tabs" id="${$parent.id + '-' + $index}">
<p>${tab.text}</p>
</div>
</template>
As you can see, I've only copied the boilerplate HTML of the jQueryUI Tabs component, and created the bindable property tabswhich is an Array of Objects like that: [{title: "", text: ""}].
tabs.js
import {bindable, inject} from 'aurelia-framework';
import $ from 'jquery';
import {tabs} from 'jquery-ui';
#inject(Element)
export class Tab {
#bindable tabs = null;
constructor(el) {
this.id = el.id;
}
attached() {
$(`#${this.id}`).tabs();
}
}
The code is pretty readable: I've imported jquery from my config.js file, and my jquery-ui from there too (only the component tabs, so it gets lighter). Then, I've injected the DOMElement to my class, so I could get it's id. I've created my bindable property tabs. In my constructor, I get the DOMElement id and populates my id property. And, finally, on the attached event (when all the binds are finished), I've got the jQuery object from my id, and called the method tabs() to turn the template into a Tabs component. Pretty simple, uh?
In my config.js file, I've added those two lines:
"jquery": "github:components/jquery#2.1.4",
"jquery-ui": "github:components/jqueryui#1.11.4",
And then you can use the Tabs component wherever you want, by calling it in any other HTML template of your project:
That's it!
You can see the working example here: http://plnkr.co/edit/ESxZA2jTlN7f6aiq1ixG?p=preview
PS: Thanks for that plnkr, Sylvian, I've used yours to fork mine.
You can import and then use jquery on your DOM elements.
Given this templatenamed test.html:
<template>
<div ref="content">test</div>
</template>
A Test custom element can manipulate the div referenced as content like this:
import {customElement, inject} from 'aurelia-framework';
import $ from 'jquery';
#customElement('test')
export class Test{
attached(){
$(this.content).css('color', 'red');
}
}
Then you can use that custom element in any view using the <test></test> tag.
This exemple uses the css() function but you can import any plug-in and apply them to your elements.
See a working example here: http://plnkr.co/edit/SEB4NK?p=preview (be patient it takes a little while to load).

Categories