0.0.2 • Published 5 years ago

intl-react-datatable v0.0.2

Weekly downloads
1
License
MIT
Repository
-
Last release
5 years ago

@o2xp/react-datatable

Build Status Code coverage Maintainability License: MIT Version code style: prettier

@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

$ 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

PropertyTypeRequired?Description
optionsobjectyesAn object that all the options to render the datatable. See Options Properties.
actionsfunctionnoFunction that take as parameter {type, payload}, where type is the action performed (save, delete etc..) and payload the data needed to perform the action. See advanced example.
refreshRowsfunctionnoFunction that return an an array of objects where each object is defined by the columns identifier as key and the value. See advanced example.
forceRerenderbooleannoDo you want to rerender the component on route change or keep the state ?
strippedbooleannoDo you want stripped rows ?
CustomTableBodyRowfunctionnoFunction that take { row, columnsOrder, rowIndex, columnSizeMultiplier, height } and return a react html element. See body row example.
CustomTableBodyCellfunctionnoFunction that take { cellVal, column, rowId } and return a react html element. See body cell example.
CustomTableHeaderRowfunctionnoFunction that take { columnsOrder, columnSizeMultiplier } and return a react html element. See header row example.
CustomTableHeaderCellfunctionnoFunction that take { column } and return a react html element. See header cell example.
customDataTypesarraynoobject that return an array of object with datatypes and react html element. See datatypes cell example.

Options Properties

PropertyTypeRequired?DefaultDescription
titlestringno" "Title of the datatable.
dimensions .datatable .widthstringno"100vw"Width of the the Datatable. (in vw / px / %)
dimensions .datatable .heightstringno"300px"Height of the Datatable. (in vh / px / %)
dimensions .row .heightstringno"60px"Height of each row of the Datatable. (in px) Minimum 60px.
keyColumnstringyes/Name of the column that has unique value and allows to identify a row.
fontstringno"Roboto"Name of the font you are using. It allows the datatable to calculate the overlapping of cells.
data .columnsarray of objectyes/An array of objects where each object is defined by this keys. Click here to have more information.
data .rowsarray of objectyes/An array of objects where each object is defined by the columns identifier as key and the value.
features .canEditbooleannofalseIf the user can edit the rows.
features .canGlobalEditbooleannofalseIf the user can turn in edit mode all the rows.
features .canPrintbooleannofalseIf you want stripped rows.
features .canDownloadbooleannofalseIf the user can download the data.
features .canSearchbooleannofalseIf the user can filter the data by text through a search input.
features .canRefreshRowsbooleannofalseIf the user can click to refresh the rows.
features .canOrderColumnsbooleanfalsenoIf the user can select the columns to display.
features .canSelectRowbooleanfalsenoIf the user can select rows.
features .canSaveUserConfigurationbooleannofalseIf the user can save his columns configuration. (order and which one is displayed)
features .userConfiguration .columnsOrderarray of stringsno An array of strings where the strings are the column identifier. Datatable will be rendered only with the columns present in the array.
features .userConfiguration .copyToClipboardbooleannofalseIf true, when the user click on cell it will copy the value in the clipboard.
features .rowsPerPage .availablearray of number and stringno10, 25, 50, 100, "All"An array with the numbers of rows per page you want available.
features .rowsPerPage .selectednumber or stringno"All"The number of rows per page selected by default.
features .additionalIconsarray of objectno If you want to add icon which trigger a function. Click here to have more information.
features .selection .selectionIconsarray of objectno If you want to add icon which execute a function with the rows selected. Click here to have more information.

Columns Props

Columns is an array of object construct with these keys :

PropertyTypeRequired?Description
idstringyesId of the column (need to be unique).
labelstringyesLabel of the column.
colSizenumberyesSize of the column (needs to be in px).
editablebooleannoIf the each value of row corresponding to the column is editable or not.
dataTypestringnoPossible values: "number", "text", "boolean", "date", "time", "dateTime". For more type, see override section.
inputTypestringnoPossible values: "input", "boolean", "select", "datePicker", "timePicker", "dateTimePicker"
dateFormatstringyes (only if datatype === "date" || "time" || "dateTime")Format of the date.
valuesarrayyes (only if inputType === "select")Possible values displayed in the select.
valueVerificationfunctionnoIf you want to verify value on save. You need to provide a function which take a parameter (the new value) and return and object in this format {error: boolean, message: string}
maskarray of regexnoWorks only with inputType === input. To build regex see react-text-mask

Additional Icons Props

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

PropertyTypeRequired?Description
titlestringyesDescription of the button. The text will be displayed on hovering the icon
iconComponentyesUse @material-ui/icons to provide an icon to display.
onClickfunctionyesA function that doesn't take parameter. The function will be triggered on click.

Additional Selection Icons Props

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

PropertyTypeRequired?Description
titlestringyesDescription of the button. The text will be displayed on hovering the icon
iconComponentyesUse @material-ui/icons to provide an icon to display.
onClickfunctionyesA function that takes a parameter (the selected rows). . The function will be triggered on click.

Overriding

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

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