@o2xp/react-datatable v1.1.80

@o2xp/react-datatable

@o2xp/react-datatable is a modulable component to render data in a table with some nice features !

See a show case just here.

Table of Contents

• Getting Started
  • Installing
  • Prop Types
    • Datatable Properties
    • Options Properties
    • Columns Props
    • Additional Icons Props
    • Additional Selection Icons Props
• Overriding
• Contributing
• Build With
• Contributors

Getting Started

Installing

$ npm i --save @o2xp/react-datatable

In your file :

// ES6
import {Datatable} from "@o2xp/react-datatable";
import React, { Component } from "react";

// Basic Example
let options  = {
    keyColumn: 'id',
    data: {
        columns: [ 
            {
                id: "id",
                label: "id",
                colSize: "80px"
            },
            {
                id: "name",
                label: "name",
                colSize: "150px"
            },
            {
                id: "age",
                label: "age",
                colSize: "50px"
            },
        ],
        rows: [
            {
                id: "50cf",
                age: 28,
                name: "Kerr Mayo"
            },
            {
                id: "209",
                age: 34,
                name: "Freda Bowman"
            },
            {
                id: "2dd81ef",
                age: 14,
                name: "Becky Lawrence"
            }
        ],
    }
}

class App extends Component {
    render() {
        return <Datatable options={options} />;
    }
}

export default App;

Attention : the column id "o2xpActions" is reserved. Using it can result of unexpected behaviours.

Live implementation

To go further check all examples

Prop Types

Datatable Properties

Options Properties

Columns Props

Columns is an array of object construct with these keys :

Rows Props

Rows is an array of object where each object is defined by the columns identifier as key and the value. You can add this key for edit purpose :

Columns Presets To Display Props

Columns Presets to display is an array of object construct with these keys :

Additional Actions Props

Additional actions is an array of object construct with these keys :

Additional Icons Props

Additional icons is an array of object construct with these keys :

Additional Selection Icons Props

Additional selection icons is an array of object construct with these keys :

Text override

Overriding

Because we want flexibility for our users we decide to leave a lot of possibility to users. So what can you override ?

• datatypes - documentation
• body row - documentation
• body cell - documentation
• header row - documentation
• header cell - documentation

Contributing

Do you want to contribute to this project ? Great ! You can start by reading our contributing guide.

Build With

• React - A JavaScript library for building user interfaces
• Redux - Redux is a predictable state container for JavaScript apps
• Material-ui - React components that implement Google's Material Design
• Webpack - A bundler for javascript and friends. Packs many modules into a few bundled assets.
• Babel - Babel is a tool that helps you write code in the latest version of JavaScript. When your supported environments don't support certain features natively, Babel will help you compile those features down to a supported version.
• Storybook - Storybook is an open source tool for developing UI components in isolation for React, Vue, and Angular. It makes building stunning UIs organized and efficient.
• Eslint - ESLint is an open source project originally created by Nicholas C. Zakas in June 2013. Its goal is to provide a pluggable linting utility for JavaScript.
• Jest - Jest is a delightful JavaScript Testing Framework with a focus on simplicity.
• Enzyme - Enzyme is a JavaScript Testing utility for React that makes it easier to test your React Components' output. You can also manipulate, traverse, and in some ways simulate runtime given the output.
• Prettier - Prettier is an opinionated code formatter.
• Husky - Husky can prevent bad git commit, git push and more 🐶 woof!

Contributors

• Morgan Dubois
• Mike Trieu
• Noé Carl