Docs | Datta Able Premium React + Redux Admin Template

Datta Able v1.0 Documentation

Datta Able admin template is react + redux admin template based on create react app, redux, BS4 with variety feature. Datta Able is not an ordinary admin panel template - It has lots of pre-define functionality which completely ready for any complex projects!!

Author :

Codedthemes

Support :

https://codedthemes.support-hub.io/

Datta Able v1.0 Installation

Quick Install -

- First of all it's required to install latest Node and npm - nodejs

- Unzip datta-able-react.zip file, Inside that directory you will find the datta-able-react/ folder

- Open your terminal/cmd then navigate to project directory datta-able-react/

- Install npm packages using command 'npm install', this will install required node.js third-party plugins into the node_modules/ folder.

- Compile/Run project using command 'npm start', this will compile app in development mode.

- Open http://localhost:3000 to view it on browser.

- Now, You can use Datta Able React Admin Template for your application development.

The project was built assuming it is hosted at the server root folder of domain/platform i.e http://demo.com.

You can control this with the homepage field in your package.json.
To deploy build for sub-folder i.e http://demo.com/project-folder-name/ than "homepage" : "http://demo.com/project-folder-name/".

You  also need to set basename in ../src/config.js file.
like, basename: '/project-folder-name'

- Build project using command 'npm run build', It will create build/ folder inside datta-able-react/ folder.

- Your app is ready to be deployed.

File Structure

datta-able-react/
├── node_modules/
├── public/
    ├── assets/
        ├── fonts/
    ├── favicon.ico
    ├── index.html
    ├── manifest.json
├── src/
    ├── App/..
        ├── components/
        ├── layout/
            ├── AdminLayout/
                ├── Breadcrumb/
                ├── NavBar/
                ├── Navigation/
                ├── app.scss
                ├── index.js
            ├── AuthLayout/
            ├── Loader/
            ├── ScrollToTop/
            ├── index.js
    ├── assets/
        ├── images/
        ├── scss/
    ├── Demo/
        ├── AppPages/
            ├── Gallery/
            ├── Task/
            ├── Todo/
        ├── Authentication/
            ├── ResetPassword/
            ├── SignIn/
            ├── SignUp/
            ├── ChangePassword.js
            ├── MapForm.js
            ├── PersonalInfo.js
            ├── ProfileSettings.js
            ├── Subscribe.js
        ├── Chart/
            ├── AmChart/
            ├── ChartJs/
            ├── EChart/
            ├── GoogleChart/
            ├── HighChart/
            ├── Nvd3Chart/
            ├── PeityChart/
            ├── RadialChart/
            ├── ReChart/
        ├── Dashboard/
            ├── Analytics.js
            ├── Crm.js
            ├── Crypto.js
            ├── Default.js
            ├── Ecommerce.js
            ├── Project.js
        ├── Extension/
            ├── Editor/
            ├── Invoice/
            ├── FileUpload.js
            ├── FullEventCalendar.js
        ├── Forms/
            ├── FormsAdvance.js
            ├── FormsElements.js
            ├── FormsMasking.js
            ├── FormsPicker.js
            ├── FormsSelect.js
            ├── FormsValidation.js
            ├── FormsWizard.js
        ├── Landing/
        ├── Maintenance/
            ├── ComingSoon.js
            ├── Error.js
            ├── OfflineUI.js
        ├── Maps/
            ├── GoogleMap/
            ├── VectorMap/
        ├── Other/
            ├── SamplePage.js
        ├── PageLayout/
            ├── PreBuilt/
            ├── Vertical/
            ├── BoxLayout.js
            ├── ColorIcon.js
            ├── DarkLayout.js
            ├── Horizontal.js
            ├── LightLayout.js
            ├── RtlLayout.js
        ├── Tables/
            ├── BootstrapTable/
            ├── DataTable/
        ├── UIElements/
            ├── Advance/
            ├── Basic/
        ├── Widget/
            ├── Chart.js/
            ├── DataUserList.js/
            ├── Data.js/
            ├── Statistics.js/
            ├── Table.js/
            ├── Users.js/
        ├── AppPages/..
    ├── hoc/
        ├── Aux/
    ├── store/
        ├── actions.js
        ├── constant.js
        ├── reducer.js
    ├── config.js
    ├── index.js
    ├── menu-items.js
    ├── route.js
    ├── routes.js
├── .gitignore
├── package.json
├── README.md

Routing & Code Splitting

Datta Able React routing system based on react-router It's also use code splitting for better performance.

How Can I add new page with menu item?

You can use the below explanation to add/remove menu routs and their menu items.

Configure Route

IF you want to add Test Component and set it into menu-item follow below steps.

Step 1: Create Test.js file at directory ../src/Demo/ and add below code.

import React, {Component} from 'react';

class Test extends Component {
    render() {
        return (
            //Page Content
        );
    }
}

export default SamplePage;

Step 2: Open file ../src/route.js(for basic admin layout, nav, side-bar, etc.) OR ../src/routes.js (for blank page like, login, error, etc)

Step 3: Open file ../src/menu-items.js and add below code in opened file.

export default {
    items: [
        {
            id: 'other',
            title: 'Other',
            type: 'group',
            icon: 'icon-other',
            children: [
                ...
                {
                    id: 'test-page',
                    title: 'Test',
                    type: 'item',
                    icon: 'feather icon-menu',
                    url: '/test'
                },
                ...
            ]
        }
    ]
}

Step 4: Add below code like code splitting in opened file route.js or routes.js

const TestPage = React.lazy(() => import('./Demo/Test'));
const routes = [
    ...
    { path: '/test', exact: true, name: 'Test', component: TestPage }
    ...
]

Step 5: Now Test page is ready to use, open url like, http://localhost:3000/test

Theme Layouts

Open `config.ts` file from directory [ ../src/config.ts ] and change options in this file.

Layout	Description
Vertical	Default Configuration basename: set basename path for `BrowserRouter`, like /datta-able-react layout: `vertical` preLayout: `null` collapseMenu: `false` layoutType: `menu-dark` navIconColor: `false` headerBackColor: `header-default` navBackColor: `navbar-default` navBrandColor: `brand-default` navBackImage: `false` rtlLayout: `false` navFixedLayout: `true` headerFixedLayout: `false` boxLayout: `false` navDropdownIcon: `style1` navListIcon: `style1` navActiveListColor: `sctive-default` navListTitleColor: `title-default` navListTitleHide: `false`
Horizontal	layout: `horizontal`
Pre Build Layout 2	layout: `vertical` preLayout: `layout-2` configBlock: `true`
Pre Build Layout 2-2	layout: `vertical` preLayout: `layout-2-2` configBlock: `true`
Pre Build Layout 3	layout: `vertical` preLayout: `layout-3` configBlock: `true`
Pre Build Layout 4	layout: `vertical` preLayout: `layout-4` configBlock: `true`
Pre Build Layout 4-2	layout: `vertical` preLayout: `layout-4-2` configBlock: `true`
Pre Build Layout 5h	layout: `horizontal` collapseMenu: `false` layoutType: `menu-light` navIconColor: `true` headerBackColor: `header-blue`
Pre Build Layout 6	layout: `vertical` preLayout: `layout-6` layoutType: `menu-light` navBrandColor: `brand-lightblue` navFixedLayout: `false` headerFixedLayout: `false` layout6Background: `#23b7e5` layout6BackSize: `auto or cover`
Pre Build Layout 8	layout: `vertical` preLayout: `layout-8` layoutType: `menu-light` headerBackColor: `header-lightblue` navBrandColor: `brand-lightblue` navFixedLayout: `true` headerFixedLayout: `true` navActiveListColor: `active-lightblue`
Static Layout	layout: `vertical` navFixedLayout: `false` headerFixedLayout: `false`
Fixed Layout	layout: `vertical` navFixedLayout: `true` headerFixedLayout: `true`
Navbar Fixed Layout	layout: `vertical` navFixedLayout: `true` headerFixedLayout: `false`
Collapse Menu Layout	layout: `vertical` collapseMenu: `true`
Box Layout	layout: `vertical` boxLayout: `true`
RTL Layout	layout: `vertical` rtlLayout: `true`
Light Layout	layout: `vertical` layoutType: `menu-light`
Dark Layout	layout: `vertical` layoutType: `dark` navBackColor: `navbar-dark` navBrandColor: `brand-dark`
Color Icon	layout: `vertical` navListTitleColor: `true`

Configuration Options

Option	Default	Type	Description
layout	vertical	string	`vertical`, `horizontal`
preLayout	null	string	`layout-2`, `layout-2-2`, `layout-3`, `layout-4`, `layout-4-2`, `layout-6`, `layout-8`
collapseMenu	false	boolean	`false`, `true`
layoutType	menu-dark	string	`menu-dark`, `menu-light`, `dark`
navIconColor	false	boolean	`true`, `false`
headerBackColor	header-default	string	`header-default`, `header-blue`, `header-red`, `header-purple`, `header-lightblue`, `header-dark`
navBackColor	navbar-default	string	`navbar-default`, `navbar-blue`, `navbar-red`, `navbar-purple`, `navbar-lightblue`, `navbar-dark`
navBrandColor	brand-default	string	`brand-default`, `brand-blue`, `brand-red`, `brand-purple`, `brand-lightblue`, `brand-dark`
navBackImage	null	string	`navbar-image-1`, `navbar-image-2`, `navbar-image-3`, `navbar-image-4`, `navbar-image-5`
rtlLayout	false	boolean	`false`, `true`
navFixedLayout	true	boolean	`false`, `true`
headerFixedLayout	false	boolean	`false`, `true`
boxLayout	false	boolean	`false`, `true`
navDropdownIcon	style1	string	`style1`, `style2`, `style3`
navListIcon	style1	string	`style1`, `style2`, `style3`, `style4`, `style5`, `style6`
navActiveListColor	active-default	string	`active-default`, `active-blue`, `active-red`, `active-purple`, `active-lightblue`, `active-dark`
navListTitleColor	title-default	string	`title-default`, `title-blue`, `title-red`, `title-purple`, `title-lightblue`, `title-dark`
navListTitleHide	false	boolean	`false`, `true`
configBlock	false	boolean	`false`, `true` (used for only preLayout)
layout6Background	#23b7e5	string	`Note:` used only for `preLayout: layout-6` Background Color #04a9f5 #ff5252 #9575CD #23b7e5 #424448 linear-gradient(to right, #1de9b6 0%, #1dc4e9 100%) linear-gradient(to right, #899FD4 0%, #A389D4 100%) linear-gradient(to right, #4facfe 0%, #00f2fe 100%) linear-gradient(to right, #667eea 0%, #764ba2 100%) linear-gradient(to right, #f77062 0%, #fe5196 100%) linear-gradient(to right, #9be15d 0%, #00e3ae 100%) linear-gradient(to right, #b224ef 0%, #7579ff 100%) linear-gradient(to right, #0acffe 0%, #495aff 100%) linear-gradient(to right, #01a9ac 0%, #01dbdf 100%) linear-gradient(to right, #fe5d70 0%, #fe909d 100%) linear-gradient(to right, #0ac282 0%, #0df3a3 100%) linear-gradient(to right, #fe9365 0%, #feb798 100%) linear-gradient(to right, #A445B2 0%, #D41872 52%, #FF0066 100%) Background Image url("assets/images/bg-images/bg1.jpg") url("assets/images/bg-images/bg3.jpg") url("assets/images/bg-images/bg4.jpg") url("assets/images/bg-images/bg5.jpg") Background Pattern url("assets/images/bg-images/1.png") url("assets/images/bg-images/2.png") url("assets/images/bg-images/3.png") url("assets/images/bg-images/4.png") url("assets/images/bg-images/5.png") url("assets/images/bg-images/6.png")
layout6BackSize	''	string	`auto`, `cover`

Header background

export default {
  'headerBackColor': 'header-default'
}

export default {
  'headerBackColor': 'header-blue'
}

export default {
  'headerBackColor': 'header-red'
}

export default {
  'headerBackColor': 'header-purple'
}

export default {
  'headerBackColor': 'header-lightblue'
}

export default {
  'headerBackColor': 'header-dark'
}

Menu background

export default {
  'navBackColor': 'navbar-default'
}

export default {
  'navBackColor': 'navbar-blue'
}

export default {
  'navBackColor': 'navbar-red'
}

export default {
  'navBackColor': 'navbar-purple'
}

export default {
  'navBackColor': 'navbar-lightblue'
}

export default {
  'navBackColor': 'navbar-dark'
}

Menu background image

export default {
  'navBackImage': 'navbar-image-1'
}

export default {
  'navBackImage': 'navbar-image-2'
}

export default {
  'navBackImage': 'navbar-image-3'
}

export default {
  'navBackImage': 'navbar-image-4'
}

export default {
  'navBackImage': 'navbar-image-5'
}

Menu Active item background

export default {
  'navActiveListColor': 'active-default'
}

export default {
  'navActiveListColor': 'active-blue'
}

export default {
  'navActiveListColor': 'active-red'
}

export default {
  'navActiveListColor': 'active-purple'
}

export default {
  'navActiveListColor': 'active-lightblue'
}

export default {
  'navActiveListColor': 'active-dark'
}

Menu caption ( title ) color

export default {
  'navListTitleColor': 'title-default'
}

export default {
    'navListTitleColor': 'title-blue'
}

export default {
    'navListTitleColor': 'title-red'
}

export default {
    'navListTitleColor': 'title-purple'
}

export default {
    'navListTitleColor': 'title-lightblue'
}

export default {
    'navListTitleColor': 'title-dark'
}

Menu List Icon

Default

export default {
  'navListIcon': 'style1'
}

export default {
  'navListIcon': 'style2'
}

export default {
  'navListIcon': 'style3'
}

export default {
  'navListIcon': 'style4'
}

export default {
  'navListIcon': 'style5'
}

export default {
  'navListIcon': 'style6'
}

Menu dropdown icon

export default {
  'navDropdownIcon': 'style1'
}

export default {
  'navDropdownIcon': 'style2'
}

export default {
  'navDropdownIcon': 'style3'
}

RTL Layouts

export default {
    'rtlLayout': true
}

Dark Layouts

export default {
    'layoutType': 'dark'
}

SCSS

How to Compile SCSS?

You need to complile scss when you change scss using koala scss Compiler

List of variables for Datta able design

You can change this _variables.scss at directory [ ../src/assets/scss/partials/_variables.scss ]

// Top bar height
$header-height: 70px;

// Sidebar menu width
$Menu-width: 264px;

// Small menu width
$Menu-collapsed-width: 80px;

// Color list for Datta Able Admin Templet
// theme color variables
$theme-color: linear-gradient(-135deg, #1de9b6 0%, #1dc4e9 100%);
$theme-color2: linear-gradient(-135deg, #899FD4 0%, #A389D4 100%);
$primary-color: #04a9f5;
$warning-color: #f4c22b;
$danger-color: #f44236;
$success-color: #1de9b6;
$purple-color: #a389d4;
$info-color: #3ebfea;
$dark-color: #37474f;
$theme-border: #eaeaea;

// header colors
$brand-background: #3f4d67;
$header-dark-background: #3f4d67;
$header-dark-text-color: #fff;
$header-light-background: #fff;
$header-light-text-color: #3f4d67;

// Sidebar colors
$menu-caption-color: #14171d;
$menu-dark-background: #3f4d67;
$menu-dark-text-color: #a9b7d0;
$menu-light-background: #fff;
$menu-light-text-color: #3f4d67;
$menu-active-color: #04a9f5;

// dark layout colors
$dark-layout: #212224;
$dark-layout-font: #adb7be;

// Menu icon
$menu-icon-color: $primary-color, #ff5252, #01a9ac ,#9575CD , #23b7e5, $warning-color;

// Header background
$color-header-name: blue, red, purple, lightblue, dark;
$color-header-color: $primary-color, #ff5252, #9575CD ,#23b7e5,lighten($dark-layout,7%);

// Menu background
$color-menu-name: blue, red, purple, lightblue, dark;
$color-menu-color: $primary-color, #ff5252, #9575CD ,#23b7e5,lighten($dark-layout,7%);

// Active background color
$color-active-name: blue, red, purple, lightblue, dark;
$color-active-color: $primary-color, #ff5252, #9575CD ,#23b7e5,lighten($dark-layout,7%);

// Menu title color
$color-title-name: blue, red, purple, lightblue, dark;
$color-title-color: $primary-color, #ff5252, #9575CD ,#23b7e5,lighten($dark-layout,7%);

// basic variable
$theme-font-family: 'Open Sans', sans-serif;
$theme-font-size: 14px;
$theme-background: #f4f7fa;
$theme-font-color: #888;
$theme-heading-color: #111;

Plugins

Plugins Name	Third Party Modules	Plugins page use	Link
Charts	amcharts3 @amcharts/amcharts3-react (AmChart3)	/widget/wdgt-chart All Dashboard and Widget	https://www.npmjs.com/package/@amcharts/amcharts3-react
	@amcharts/amcharts4 (AmChart4)	/charts/amchart	https://www.amcharts.com/docs/v4/getting-started/integrations/using-react
	echarts echarts-for-react (ECharts)	/charts/e-chart	https://www.npmjs.com/package/echarts-for-react
	highcharts highcharts-react-official (HighCharts)	/widget/wdgt-chart	https://www.npmjs.com/package/highcharts-react-official
	peity-react	/charts/peity	https://www.npmjs.com/package/peity-react
	chart.js react-chartjs-2	/charts/chart-js	https://www.npmjs.com/package/react-chartjs-2
	react-flot	/widget/wdgt-chart	https://www.npmjs.com/package/react-flot
	react-google-charts	/charts/google-chart	https://www.npmjs.com/package/react-google-charts
	react-nvd3	/charts/nvd3	https://www.npmjs.com/package/react-nvd3
	recharts	/charts/re-chart	http://recharts.org/
Editor	@ckeditor/ckeditor5-react (CkEditor)	-	https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/react.html
	@ckeditor/ckeditor5-build-classic	/editor/ck-editor/ck-classic	https://www.npmjs.com/package/@ckeditor/ckeditor5-build-classic
	@ckeditor/ckeditor5-build-balloon	/editor/ck-editor/ck-balloon	https://github.com/ckeditor/ckeditor5-build-balloon
	@ckeditor/ckeditor5-build-inline	/editor/ck-editor/ck-inline	https://github.com/ckeditor/ckeditor5-build-inline
	@ckeditor/ckeditor5-build-decoupled-document	/editor/ck-editor/ck-document	https://github.com/ckeditor/ckeditor5-build-decoupled-document
	jodit-react (Jodit Editor)	/editor/jodit-wysiwyg	https://github.com/jodit/jodit-react
	nib-core (Rich Editor)	/editor/rich-editor	https://github.com/jpuri/Nib
Table	datatables.net-bs datatables.net-autofill-bs datatables.net-buttons-bs datatables.net-colreorder-bs datatables.net-dt datatables.net-fixedcolumns-bs datatables.net-fixedheader-bs datatables.net-keytable-bs datatables.net-responsive-bs datatables.net-rowgroup-bs datatables.net-rowreorder-bs datatables.net-scroller-bs datatables.net-select-bs jszip pdfmake	/tables/datatable	https://datatables.net
Tree View	deni-react-treeview	/advance/tree-view	https://www.npmjs.com/package/deni-react-treeview
Tree View	react-animated-tree	/advance/tree-view	https://www.npmjs.com/package/react-animated-tree
Full Calender	fullcalendar-reactwrapper	/full-calendar	https://www.npmjs.com/package/fullcalendar-reactwrapper
Map	google-maps-react (Google Map)	/maps/google-map	https://www.npmjs.com/package/google-maps-react
P-Notify	pnotify	/advance/p-notify	https://sciactive.com/pnotify
Syntax Highlighter	prism-react-renderer	/advance/syntax-highlighter	https://www.npmjs.com/package/prism-react-renderer
Range Slider	rc-slider	/advance/range-slider	https://www.npmjs.com/package/rc-slider
Animation Modal	react-animated-modal	/advance/modal	https://www.npmjs.com/package/react-animated-modal
BS4	react-bootstrap	common	https://react-bootstrap.github.io
Form Validation	validator react-bootstrap4-form-validation	/forms/form-validation	https://andyhu92.github.io/react-bootstrap4-form-validation
Color Picker	react-color	/forms/form-picker	https://www.npmjs.com/package/react-color
Counter/Timer	react-compound-timer	/task/task-detail	https://www.npmjs.com/package/react-compound-timer
Date Picker	react-datepicker date-fns	/advance/datepicker	https://www.npmjs.com/package/react-datepicker
Date Picker	react-datetime	/forms/form-picker	https://github.com/YouCanBookMe/react-datetime
Form Select	react-select chroma-js	/forms/form-select	https://react-select.com/home
Form Select	react-dual-listbox	/forms/form-select	https://www.npmjs.com/package/react-dual-listbox
File Upload	react-dropzone-component	/file-upload	https://www.npmjs.com/package/react-dropzone-component
Star Rating	react-rating	/advance/rating	https://www.npmjs.com/package/react-rating
Slider/Carousel	react-slick	/advance/slider	https://www.npmjs.com/package/react-slick
Light Box	react-image-video-lightbox	/advance/light-box	https://www.npmjs.com/package/react-image-video-lightbox
Light Box	react-images-texts-videos	/advance/light-box	https://www.npmjs.com/package/react-images-texts-videos
Form Mask	react-input-mask	/forms/form-masking	https://www.npmjs.com/package/react-input-mask
Form Mask	react-number-format	/forms/form-masking	https://www.npmjs.com/package/react-format-number
Notes	react-stickies	/todo/todo-notes	https://www.npmjs.com/package/react-stickies
Form Advance - Tag Input	react-tag-autocomplete	/forms/form-advance	https://www.npmjs.com/package/react-tag-autocomplete
Notification	react-toast-notifications	/advance/notification	https://www.npmjs.com/package/react-toast-notifications
Task Board	react-trello	/advance/task-board	https://www.npmjs.com/package/react-trello
Tour	reactour	/advance/tour	https://github.com/elrumordelaluz/reactour
Sweet Alert	sweetalert2 sweetalert2-react-content	/advance/alert	https://github.com/sweetalert2/sweetalert2-react-content

FAQ

What is Datta Able?

Datta Able is responsive admin template/Dattaboard which useful for your complete entire projects like CRM system - Task System - User Management System - Social Dattaboard etc. Without any trouble Datta Able gives the perfect outcome with tons of ready made plugins which helps you at every step while creating any project.

Why choose Datta Able?

Datta Able built using react with redux and angular 7+ and bootstrap's latest version 4 which have complete compatibility on bootstrap4. It is fully crafted for every one's need and its fullfilled those need too. Tons of Plugins, Forms, Charts, Tables, Custom Pages gives extra smoothness in project.

Version Change Log

v1.0
-----------

09-01-2019 - v1.0 Release

Datta Able v1.0 Documentation

Author :

Support :

Datta Able v1.0 Installation

Quick Install -

File Structure

Routing & Code Splitting

Configure Route

Theme Layouts

Open `config.ts` file from directory [ ../src/config.ts ] and change options in this file.

Configuration Options

Background Color

Background Image

Background Pattern

Header background

Menu background

Menu background image

Menu Active item background

Menu caption ( title ) color

Menu List Icon

Menu dropdown icon

RTL Layouts

Dark Layouts

SCSS

How to Compile SCSS?

List of variables for Datta able design

Plugins

FAQ

What is Datta Able?

Why choose Datta Able?

Licence terms?

What about Item Support?

What is Support Turnaround time ?

How i rate the Datta Able ?

Version Change Log

Datta Able v1.0 Documentation

Author :

Support :

Datta Able v1.0 Installation

Quick Install -

File Structure

Routing & Code Splitting

Configure Route

Theme Layouts

Open config.ts file from directory [ ../src/config.ts ] and change options in this file.

Configuration Options

Background Color

Background Image

Background Pattern

Header background

Menu background

Menu background image

Menu Active item background

Menu caption ( title ) color

Menu List Icon

Menu dropdown icon

RTL Layouts

Dark Layouts

SCSS

How to Compile SCSS?

List of variables for Datta able design

Plugins

FAQ

What is Datta Able?

Why choose Datta Able?

Licence terms?

What about Item Support?

What is Support Turnaround time ?

How i rate the Datta Able ?

Version Change Log

Open `config.ts` file from directory [ ../src/config.ts ] and change options in this file.