sd1337/adminlte-2-react

adminlte-2-react's Issues

Login Page

How to implement login page ?
can someone help me

Badge on the content tab

Can I add badges to the content tab title?

Please help.

Auto collapse sidebar in mobile

Hi.. Is there a way to automatically collapse the sidebar when an item is selected from the menu in mobile?
Thanks

Sidebar Children not working

<Item key="preferences" text="Preferences" icon='fas-cogs' chidren={ <Item key='a77777777777' text='b' isSubItem={true} to='#' /> } isSubItem={true} />,

Datatable Issue

error on function orderToInternal(order)

TypeError: null has no properties

Please provide basic datatable example and also there is two different docs on two different link
Link 1 : https://www.npmjs.com/package/adminlte-2-react
Link 2 : https://www.npmjs.com/package/adminlte-2-react

Please check these two links and match datatable params
I am just using below code Please help me ASAP

<DataTable id="external-data" title="Movie List" columns="[{ title: 'Title', data : 'title' }]" data="[{ title: 'Conan the Barbarian' }]" order="[{ index : '0' , column : 'title', direction: 'desc'}]" options="{paging : true, lengthChange: false, searching: true, ordering: false} "></DataTable>

"Super expression must..." issue when installed via "npm i adminlte-2-react"

Hi.

I've just compiled and tested the full project by ejecting cra and making the changes in the webpack config file. But I'd really like to start a brand new project only installing this package via npm, but I am still getting the TypeError: Super expression must either be null or a function, not undefined when upload to production server

In this case, what should I do? I did not use create-react-app

Thanks in advance

CSS issue

If I include Bootstrap in my project, it overlaps Adminlte-2-react css styles.

How to use Navbar?

Please tell me where I place Navbar and their items?

Issue with Select2 input

Trying to use Select2 input but wasn't able to.
Can you help me out?

MyFile.js:

import { Select2 } from 'adminlte-2-react';

export function EditableSelect(props) {
    return (
      <div className="col-md-2">
        <div className="form-group">
          <Select2  options={props.options} />
        </div>
      </div>
    );
}

Gives this error:

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `EditableSelect`. 

Ajax data column, unable to bind events

When I used the datatable, I set the ajax option in the given option, but I couldn't rebind the event to the button that was added to the ajax-postdatatable.

    firstColumns = [
        { title: 'name', data: 'name' },
        {
            title: 'operation',
            data: 'id',
            render: (data) => <Button text="delete" type={"danger"} className="on-click" />
        }
    ];

    options = {
        paging: true,
        lengthChange: false,
        searching: true,
        ordering: false,
        info: true,
        autoWidth: false,
        ajax:{
            'url':*********
        }
    };

<DataTable id={"user_list"}
                                       columns={this.firstColumns}
                                       options={this.options}
                                       onClickEvents={this.operationalEvent}
                                       footer hover striped responsive pageSize={2} />

Sidebar content

Hi

First of all thank you for the great work. I am quite new in "React digging" and I was happy to see as not very difficult to render, some pages with your adminlte-2-react. You saved people a lot of time ;)

I am now questioning myself how to manage sidebar content dynamically. I've defined in app.js the

render() {
    return (
        <AdminLTE title={["App", "Generator"]} titleShort={["Ap", "Ge"]} theme="blue" sidebar={this.sidebar}>

...

I am thinking to use a component WideLocalStorage
and in each other components used for rendering some content I will get in class constructor
this.state = {
sideBar: WideLocalStorage.prototype.get_item('sideBar'),
...
and this way I could store in localStorage sidebar Items in any of the component when I need changes...

But need somehow to refresh the DOM CTRL+F5 work. For sure it should be done differently

Super expression must either be null or a function, not undefined

I have an issue with PureCalendarDay, apparently from airbnb? Locally compiling the project just runs fine, but if I try to deploy on Heroku within a node.js application that error blocks the app. I've read that can be a typo mistake, but I've checked the code and nothing apparently is wrong. :( 2 days looking for...

Datatable does not appear ICONS

Datatables is not showing
the sorting icons in columns need to install something?

Thanks

Charles

Its possible to have a route without admin lte menu ?

I am trying make the login screen, but i dont want the admin lte navbar and sidebar, have some way to do that?

React Warnings

I create this ticket to collect some React Warnings, where they occur and how to fix them. If time permits it, I'll create a PR with possible fixes as well.

Missing key:

• adminlte-2-react/src/components/content/SmartTable.tsx

  Lines 92 to 96 in 49d65f0

  	return columns
  	.filter((p) => hiddenColumns.find((p2) => p2 === p.data) === undefined)
  	.map((p) => (
  	<>
  	<SmartTableHeader

Add button / input component to SmartTable

Is it possible to add a UI element like a button or input field with a id/name scheme to a column in the SmartTable?

admin-LTE-3 support?

Hello, are there plans to support adminlte v3 in the near future? would love to help out if possible.

[FR]: Sidebar Item onClick handler

(FR - feature request)

it would be perfect solution for some projects with sidebar.
Except of redirecting to url and handle url by react, what if create onClick handler to process data?

i am getting warnings

react-dom.development.js:12029 Warning: componentWillMount has been renamed, and is not recommended for use. See https://fb.me/react-async-component-lifecycle-hooks for details.

adminlte

Add DateTimeRange

Is it possible to add Date and Time range picker? Is it hard? I have no idea, I'm just a noob in react that needs this. Any advice/workaround is highly appreciate.

npm run build on react resulted to error

After running npm build using react. It successfully generate build folder. Unfortunately running the generated build resulted in error:

Uncaught TypeError: Super expression must either be null or a function, not undefined

Navbar not visible

I am not able to use navbar because I am confused that where I put the given code
<Navbar.Core> <Entry icon="fas-envelope"> <MessageItem text="ckc" /> </Entry> </Navbar.Core>

I am also tried to add it in AdminLite node children but not work so please provide me sample code for this task

Issue with SideBar

Hi, I think there's an issue with the Sidebar component.

It happens when the page is refreshed/redirected the second time.

onClick event not working inside datatable

Hello, I'm trying to write a DataTable to show records that I fetched from some API. I can list it without problems. My next desired step would be to put a button to delete the item listed. Although I could show the button, I can't make the onClick event on that button work.
The code I'm using is bellow.

<Content title="Adicionar Eventos do robô" browserTitle="BackOffice">

          <Row>
            <Col xs={12}>
              <Box title="Listagem de eventos" type="primary" header={adicionar} footer={adicionar} >

                            <DataTable
                              responsive="true"
                              id="robot-event-list"
                              columns={ [ {title: "Robô", data: "robot_name"},
                                          {title:"Tipo de comando", data: "command_type"},
                                          {title: "Validade inicial", data: "valid_from"},
                                          {title: "Validade final", data: "valid_until"},
                                          {title: "Data da execução", data: "execution_date"},
                                          {title: 'Actions', render: (data) =>  <Button text="Action" onButtonClick={()=>{ alert('a') }  } ><Button text="dentro" onClick={()=>{ alert('a') } }></Button></Button>}
                                      ]}
                              options={{
                                select: false,
                                rowId: "browser",
                              }}
                              data = { items }
                            />
              </Box>
            </Col>
          </Row>
          </Content>

How can I make it work?

Issue with DataTable (Externally controlled data)

When we externally control data in DataTable component by passing totalElements, we click on last page. Then button Next is disabled, but you can still click on it and go to next page, when there is no elements.
hasMore doesn't affect anything

import { Content, Row, Col, Box, Button, Inputs, DataTable } from "adminlte-2-react"
...
getData() {
    this.setState({ loading: true });
    const waitTime = Math.random() * 2000;
    setTimeout(() => {
      const { order, activePage, selectedEngine } = this.state;
      let localData = data;
      const filteredData = localData.sort((a, b) => {
        if (a[order.column].toLowerCase() < b[order.column].toLowerCase()) { return order.direction === 'asc' ? -1 : 1; }
        if (a[order.column].toLowerCase() > b[order.column].toLowerCase()) { return order.direction === 'asc' ? 1 : -1; }
        return 0;
      }).slice(10 * activePage, 10 * activePage + 10);
      const hasMore = filteredData.slice(10 * activePage, 10 * activePage + 10).length === 10;
      this.setState({ filteredData, loading: false, hasMore });
    }, waitTime);
  }
...
<DataTable
  id="external-data"
  columns={firstColumns}
  options={{
    autoWidth: false,
    select: true,
    rowId: 'browser',
  }}
  data={filteredData}
  page={activePage}
  pageSize={10}
//  hasMore={hasMore}
  totalElements={(filteredData && localData.length) || 0}
  onPageChange={(page) => {
    this.setState({ activePage: page });
    this.getData();
  }}
/>