sussol-react-table
A Sussol themed wrapper and simple API for the blueprintjs table component
Last updated 2 years ago by jtrein .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install sussol-react-table 
SYNC missed versions from official npm registry.

Build Status

sussol-react-table

A wrapper and simple API for using the blueprintjs data table

Installation

yarn add sussol-react-table

or

npm install sussol-react-table

Added Options

Prop Type Description
cellAutoHeight Object \| Boolean Defaults to false. If true, or an object of options is provided, the table will adjust the <Cell /> height to fit the length of the content. Use with wrapText: true inside coreCellProps for best results with no truncation.
cellDataKey String Pass a key (object property) from your table data set as a string. The data's key will be used to access a value – the unique key. Good for selecting the table row and loading a corresponding component, based on the selected key. e.g. { ... code: 123456789, ...}
columns Array [{ key: String, title: String, ?sortable: Boolean, ?align: "left\|center\|right" }] Column headers for the table.
coreCellProps Object Pass any core Blueprint <Table /> props through.
tableData Array [{ any }] Must contain at least the valid columns keys.
defaultColumnAlign String "left\|center\|right" The CSS text alignment for all table cells. Defaults to "left". A column's align key takes precedence.
defaultSortKey String The default column key for sorting the table data. If no key is set, nothing is done. Be sure your data already exists when the component initialises (i.e. {this.state.data.length && ...).
defaultSortOrder String "asc\|desc" If defaultSortKey is set, determines the default column sort direction on initialisation. Defaults to "asc".
coreEditableCellProps Object An object of Blueprint <EditableCell /> props to pass through. All handler functions will be passed value: String, row: Number, { column:Number, columnKey:String }:Object, which differs slightly from the default implementation options.
loadingRowCount Number If set, table will show the core loading state for rows/cells equal to the value of loadingRowCount. Defaults to 0.

NOTE:

  • All other blueprintjs Table props are passed to its root <Table /> component.

Usage

import React from 'react';
import { SussolReactTable } from 'sussol-react-table';

const columns = [
  {
    key: 'name',
    title: 'Name',
    sortable: true,
  },
  {
    key: 'code',
    title: 'Code',
    sortable: true,
  },
  {
    key: 'group',
    title: 'Editable Column',
    editable: true,
  },
];

const data = [];
for (let i = 0; i < 100; i++) {
  data.push({ code: `code${i}`, name: `name${i}`, group: `group${i % 2}` });
}

export class App extends React.Component {
  render() {
    return (
      <div style={{ height: 400 }}>
        <h1>A Beautiful table</h1>
        <SussolReactTable
          columns={columns}
          tableData={data}
          cellDataKey="code"
        />
      </div>
    );
  }
}

Required style dependencies

You will need include the following styles via your index.html (or by bundling them). Make sure the path to styles is correct.

  • path/to/node_modules/@blueprintjs/core/dist/blueprint.css
  • path/to/node_modules/@blueprintjs/table/dist/table.css
  • path/to/node_modules/normalize.css/normalize.css (good for resetting to safe, base styles for most all browsers)

Testing locally via another project

  1. From inside sussol-react-table run yarn build
  2. From your project run yarn add file:path/to/sussol-react-table
  3. Run your project

Additional docs

Read up on the API for the blueprintjs table component.

Current Tags

  • 0.1.23                                ...           latest (2 years ago)
  • 1.0.0-beta1                                ...           next (2 years ago)

26 Versions

  • 1.0.0-beta1                                ...           2 years ago
  • 1.0.0-beta                                ...           2 years ago
  • 0.1.23                                ...           2 years ago
  • 0.1.22                                ...           2 years ago
  • 0.1.21                                ...           2 years ago
  • 0.1.20                                ...           2 years ago
  • 0.1.19                                ...           2 years ago
  • 0.1.18                                ...           2 years ago
  • 0.1.17                                ...           2 years ago
  • 0.1.16                                ...           3 years ago
  • 0.1.15                                ...           3 years ago
  • 0.1.14                                ...           3 years ago
  • 0.1.13                                ...           3 years ago
  • 0.1.12                                ...           3 years ago
  • 0.1.11                                ...           3 years ago
  • 0.1.10                                ...           3 years ago
  • 0.1.9                                ...           3 years ago
  • 0.1.8                                ...           3 years ago
  • 0.1.7                                ...           3 years ago
  • 0.1.6                                ...           3 years ago
  • 0.1.5                                ...           3 years ago
  • 0.1.4                                ...           3 years ago
  • 0.1.3                                ...           3 years ago
  • 0.1.2                                ...           3 years ago
  • 0.1.1                                ...           3 years ago
  • 0.1.0                                ...           3 years ago
Downloads
Today 1
This Week 1
This Month 1
Last Day 0
Last Week 0
Last Month 0
Dependencies (4)
Dev Dependencies (17)
Dependents (0)
None

Copyright 2014 - 2017 © taobao.org |