Integrating reactstrap library

[haiderali22]

hi, I am using reactstrap in one of my project and wanted to use it it my application but it uses react-bootsrap components so just out of curiosity I cloned the repo and changed the react-bootstrap library to reactstrap and it worked perfectly, so I was wondering if you can allow me to use the code in crate a separate repo for this and npm register package with or if possible you can creat a repo with same code(reactstrap-datatable) and I can then create a merge request on it and you can also publish this on npm registery

[imballinst]

hey @haiderali22!

Question, does that mean reactstrap has the exactly the same way-of-importing compared to react-bootstrap? If that's the case, let me see what I can do.

I'll most likely publish a library with a very common API in the DatatableWrapper, so the idea is hopefully this library will be inheriting that and other consumers who want to use non-react-bootstrap can use that common table library instead. WDYT?

[haiderali22]

hey @imballinst thank you for your response, there were few changes like in reactstrap instead of form.label lable are imported directly from reactstrap

Please a have look at my repo for reference https://github.com/haiderali22/reactstrap-datatable

Yes I agree with the approach you suggested about common api

[imballinst]

I see. Thanks for the repository, that's very helpful @haiderali22!

I'll use it as a reference. I'll get back to the issue when I finish it (hopefully I can finish it by this weekend). Thanks!

[haiderali22]

Maybe I missed in reading the docs is there any functionality for dealing with remote data e.g we can set the data on load , but we also need events for numofRowsChanged, sort change Event, pagechange event etc

[imballinst]

@haiderali22 would it be something like this?

https://github.com/imballinst/react-bs-datatable/blob/c6fa08e4f247cdd9f36fb1bbca4d7dcd8ee30be3/src/__stories__/01-Controlled.stories.tsx#L87-L300

In that case I kinda "mocked" the fetch with a Promise + setTimeout, so probably it should work with any kind of backend. Probably controlled table is the way to go, though. Or maybe I don't understand your case enough, could you help provide a repro in Codesandbox or something?

[haiderali22]

Thanks this is exactly I want

[imballinst]

@haiderali22 it's still very-very early iteration, could you check out this sandbox? https://codesandbox.io/s/react-abstract-dattable-with-reactstrap-0wfzr3?file=/src/App.tsx

Some key differences than react-bs-datatable:

We need to work on some components first

Here, we need to create the icon and checkbox components that we're going to pass later.

import {
  faSort,
  faSortUp,
  faSortDown,
  faTimes
} from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

const ICONS = {
  sort: faSort,
  "sort-up": faSortUp,
  "sort-down": faSortDown,
  times: faTimes
};

function Icon(props: { icon: "times" | "sort" | "sort-up" | "sort-down" }) {
  return <FontAwesomeIcon icon={ICONS[props.icon]} className="fa-fw" />;
}

function Checkbox(props: any) {
  return <Input {...props} type="checkbox" />;
}

Pass table components to DatatableWrapper

Then, we need to pass the components to DatatableWrapper. I think some of these are redundant, so probably I'll do some optimization later when I have the time.

tableComponents={{
  Button: (props) => <Button {...props} color="primary" />,
  ButtonGroup,
  Checkbox,
  Col,
  FormControl: Input,
  FormGroup,
  HelperText: FormText,
  Icon,
  InputGroup,
  Label,
  Row,
  Select: (props) => <Input {...props} type="select" />,
  Table
}}

Please let me know what you think. Thanks!

[haiderali22]

@imballinst sorry for late reply , well i was thinking moving the core logic in another package and creating 2 separate package for reactstrap and react-bootstrap

Edit: after looking at the sandbox i think you have created react-abstract-datatable libraray for core , if yes then yes i agree with you

[imballinst]

@haiderali22 yeah, that is right, so anyone can use react-abstract-datatable for any kind of CSS component libraries, although I'm not totally opposed to creating reactstrap-datatable. I can create and publish it too if you prefer. Let me know what you think!

[haiderali22]

@imballinst I was only saying for another package because it will reduce boilerplate code but again it isn't much so only react-abstract-datatable is fine

[imballinst]

@haiderali22 alrighty, I'll close this issue, then. Feel free to re-open if you face further issues. Thanks!