JSPM – material-react-table-datagrid@1.0.1

Package Exports

material-react-table-datagrid

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (material-react-table-datagrid) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Welcome to React DataGrid

The MOST Powerful DataGrid/DataTable/Tree Table component for React based Line Of Business Applications

Print, Word/Excel Export, Server/Client Paging and Filtering, Customizable Filter Controls and Summary Footers, User Settings, Preference Persistence

Smooth scroll, Nested Hierarchical Tree/child grids, Left/Right Locked Columns, Lazy Load/Virtual Scroll

Visit us at:

http://www.reactdatagrid.com/

Instructions

Instruction Video : https://www.youtube.com/watch?v=sO3o0zG93fM
Running example : https://www.webpackbin.com/bins/-Kj9JhCTXC3CghFUfRtQ
Code : https://github.com/flexicious/react-datagrid-getting-started

npm install
npm start
Sample code:

 <div>
      <h1>Hello World!</h1>
      <MaterialDataGrid
        width={"100%"}
        enablePaging
        enablePreferencePersistence
        enableExport
        enableFilters
        enableFooters
        dataProvider={[
          { label: "Company A", state: "NJ", rank: "1.11", date: new Date(2018, 10, 10) },
          { label: "Company B", state: "PA", rank: "11.1", date: new Date(2018, 11, 10) },
          { label: "Company C", state: "CT", rank: "-111", date: new Date(2019, 0, 10) },
          { label: "Company D", state: "NY", rank: "2.34", date: new Date(2019, 1, 10) },
          { label: "Company E", state: "NJ", rank: "22.2", date: new Date(2019, 2, 10) }
        ]}
      >

        <MaterialCheckBoxColumn/>
        <MaterialDataGridColumn dataField="label" filterControl="TextInput" />
        <MaterialDataGridColumn dataField="state" filterControl="MultiSelectComboBox" filterComboBoxBuildFromGrid />
        <MaterialDataGridColumn dataField="rank" sortNumeric filterControl="NumericRangeBox" />
        <MaterialDataGridColumn dataField="state" headerText="state1" filterControl="ComboBox" filterComboBoxBuildFromGrid />
        <MaterialDataGridColumn dataField="date" format="date" formatterDateFormatString={Constants.LONG_DATE_MASK}
          filterControl="DateComboBox"
          filterDateRangeOptions={[DateRange.DATE_RANGE_THISQUARTER, DateRange.DATE_RANGE_LASTQUARTER, DateRange.DATE_RANGE_THISYEAR, DateRange.DATE_RANGE_LASTYEAR, DateRange.DATE_RANGE_CUSTOM]}
          footerOperation="count" footerLabel="Count:" footerOperationPrecision="0" />
      </MaterialDataGrid>
    </div>