New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

pui-react-sortable-table

Package Overview
Dependencies
Maintainers
12
Versions
33
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

pui-react-sortable-table - npm Package Compare versions

Comparing version

3.0.0-alpha.1
to
3.0.0-alpha.2

9

package.json
{
"name": "pui-react-sortable-table",
"version": "3.0.0-alpha.1",
"version": "3.0.0-alpha.2",
"description": "A React component that provides a table that can be sorted by column",

@@ -27,10 +27,9 @@ "main": "sortable-table.js",

"babel-runtime": "^5.8.3",
"array-ify": "^1.0.0",
"classnames": "^1.2.0",
"lodash.findindex": "^3.2.1",
"lodash.sortby": "^3.1.1",
"pui-css-iconography": "3.0.0-alpha.1",
"pui-css-tables": "3.0.0-alpha.1",
"pui-react-helpers": "3.0.0-alpha.1"
"pui-css-iconography": "3.0.0-alpha.2",
"pui-css-tables": "3.0.0-alpha.2",
"pui-react-helpers": "3.0.0-alpha.2"
}
}

42

README.md

@@ -46,9 +46,17 @@ # pui-react-sortable-table

```js
var {SortableTable, TableHeader, TableRow, TableCell} = require('pui-react-sortable-table');
var {SortableTable} = require('pui-react-sortable-table');
var MyComponent = React.createClass({
render() {
var headers = [
<TableHeader sortable={true}>c1</TableHeader>,
<TableHeader sortable={true}>c2</TableHeader>,
];
const columns = [
{
attribute: 'c1',
displayName: 'C One',
sortable: true
},
{
attribute: 'c2',
displayName: 'C Two',
sortable: true
}
];
var data = [

@@ -58,12 +66,3 @@ {c1: 'yes', c2: 'foo'},

];
return <SortableTable headers={headers}>
{sortTableData.map(function(datum, key) {
return (
<TableRow key={key}>
<TableCell>{datum.c1}</TableCell>
<TableCell>{datum.c2}</TableCell>
</TableRow>
);
})}
</SortableTable>;
return <SortableTable columns={columns} data={data}/>
}

@@ -75,8 +74,17 @@ });

- ``headers``
- `Array<Object>`: A list of `TableHeader` components
- ``columns``
- `Array<Object>`: A list of column metadata
- ``CustomRow``
- `Component`: The component to use when rendering table rows
- ``data``
- `Array<Object>`: A list of data to populate rows
- ``defaultSort``
- `String`: The name of the column to sort on first
*****************************************
(c) Copyright 2015 Pivotal Software, Inc. All Rights Reserved.

270

sortable-table.js
/*(c) Copyright 2015 Pivotal Software, Inc. All Rights Reserved.*/
'use strict';
var _extends = require('babel-runtime/helpers/extends')['default'];
var _objectWithoutProperties = require('babel-runtime/helpers/object-without-properties')['default'];
var _extends = require('babel-runtime/helpers/extends')['default'];
var _interopRequireDefault = require('babel-runtime/helpers/interop-require-default')['default'];

@@ -18,6 +18,2 @@

var _arrayIfy = require('array-ify');
var _arrayIfy2 = _interopRequireDefault(_arrayIfy);
/**

@@ -33,2 +29,3 @@ * @component TableHeader

var sortBy = require('lodash.sortby');
var types = React.PropTypes;
var TableHeader = React.createClass({

@@ -38,5 +35,5 @@ displayName: 'TableHeader',

propTypes: {
onClick: React.PropTypes.func,
onSortableTableHeaderClick: React.PropTypes.func,
sortable: React.PropTypes.bool
onClick: types.func,
onSortableTableHeaderClick: types.func,
sortable: types.bool
},

@@ -78,10 +75,6 @@

*/
var TableCell = React.createClass({
displayName: 'TableCell',
var TableCell = function TableCell(props) {
return React.createElement('td', props);
};
render: function render() {
return React.createElement('td', this.props);
}
});
exports.TableCell = TableCell;

@@ -93,10 +86,6 @@ /**

*/
var TableRow = React.createClass({
displayName: 'TableRow',
var TableRow = function TableRow(props) {
return React.createElement('tr', props);
};
render: function render() {
return React.createElement('tr', this.props);
}
});
exports.TableRow = TableRow;

@@ -107,12 +96,24 @@ /**

*
* @property `headers` {Array<Object>} A list of `TableHeader` components
* @property `columns` {Array<Object>} A list of column metadata
* @property `CustomRow` {Component} The component to use when rendering table rows
* @property `data` {Array<Object>} A list of data to populate rows
* @property `defaultSort` {String} The name of the column to sort on first
*
*
* @example ```js
* var {SortableTable, TableHeader, TableRow, TableCell} = require('pui-react-sortable-table');
* var {SortableTable} = require('pui-react-sortable-table');
* var MyComponent = React.createClass({
* render() {
* var headers = [
* <TableHeader sortable={true}>c1</TableHeader>,
* <TableHeader sortable={true}>c2</TableHeader>,
* ];
* const columns = [
* {
* attribute: 'c1',
* displayName: 'C One',
* sortable: true
* },
* {
* attribute: 'c2',
* displayName: 'C Two',
* sortable: true
* }
* ];
* var data = [

@@ -122,12 +123,3 @@ * {c1: 'yes', c2: 'foo'},

* ];
* return <SortableTable headers={headers}>
* {sortTableData.map(function(datum, key) {
* return (
* <TableRow key={key}>
* <TableCell>{datum.c1}</TableCell>
* <TableCell>{datum.c2}</TableCell>
* </TableRow>
* );
* })}
* </SortableTable>;
* return <SortableTable columns={columns} data={data}/>
* }

@@ -142,8 +134,18 @@ * });

propTypes: {
headers: React.PropTypes.arrayOf(React.PropTypes.element)
columns: types.array.isRequired,
CustomRow: types.func,
data: types.array.isRequired,
defaultSort: types.string
},
getInitialState: function getInitialState() {
var sortCol = _lodashFindindex2['default'](this.props.headers, function (header) {
return header.props.sortable;
var _props3 = this.props;
var columns = _props3.columns;
var defaultSort = _props3.defaultSort;
var sortCol = _lodashFindindex2['default'](columns, function (_ref) {
var sortable = _ref.sortable;
var attribute = _ref.attribute;
return defaultSort ? attribute === defaultSort : sortable;
});

@@ -159,12 +161,2 @@

headerClassesWithSortDirection: function headerClassesWithSortDirection(_ref) {
var headerClassName = _ref.headerClassName;
var isSortColumn = _ref.isSortColumn;
return classnames(headerClassName, {
'sorted-asc': isSortColumn && this.state.sortAscending,
'sorted-desc': isSortColumn && !this.state.sortAscending
});
},
sortedRows: function sortedRows() {

@@ -174,9 +166,29 @@ var _state = this.state;

var sortAscending = _state.sortAscending;
var _props4 = this.props;
var columns = _props4.columns;
var data = _props4.data;
var CustomRow = _props4.CustomRow;
var sortedRows = sortBy(this.props.children, function (row) {
var cells = _arrayIfy2['default'](row.props.children);
var cellForSorting = cells[sortColumn];
return cellForSorting.props.children;
var sortedData = sortBy(data, function (datum) {
return datum[columns[sortColumn].attribute];
});
return sortAscending ? sortedRows : sortedRows.reverse();
if (!sortAscending) sortedData.reverse();
return sortedData.map(function (datum, rowKey) {
if (CustomRow) return React.createElement(CustomRow, { datum: datum, key: rowKey, index: rowKey });
var cells = columns.map(function (_ref2, key) {
var attribute = _ref2.attribute;
return React.createElement(
TableCell,
{ key: key },
datum[attribute]
);
});
return React.createElement(
TableRow,
{ key: rowKey },
cells
);
});
},

@@ -187,3 +199,2 @@

var headers = this.props.headers;
var _state2 = this.state;

@@ -193,10 +204,21 @@ var sortColumn = _state2.sortColumn;

return headers.map(function (header, index) {
return this.props.columns.map(function (_ref3, index) {
var attribute = _ref3.attribute;
var sortable = _ref3.sortable;
var displayName = _ref3.displayName;
var headerProps = _ref3.headerProps;
headerProps = headerProps || {};
var isSortColumn = sortColumn === index;
return React.cloneElement(header, {
var className = undefined;
if (isSortColumn) {
className = sortAscending ? 'sorted-asc' : 'sorted-desc';
}
className = classnames(className, headerProps.className);
headerProps = _extends({}, headerProps, {
className: className,
sortable: sortable,
key: index,
className: _this.headerClassesWithSortDirection({
headerClassName: header.props.className,
isSortColumn: isSortColumn
}),
onSortableTableHeaderClick: function onSortableTableHeaderClick() {

@@ -206,2 +228,8 @@ return _this.setSortedColumn(index, isSortColumn ? !sortAscending : true);

});
return React.createElement(
TableHeader,
headerProps,
displayName || attribute
);
});

@@ -211,4 +239,3 @@ },

render: function render() {
var props = _puiReactHelpers.mergeProps(this.props, { className: ['table', 'table-sortable'] });
var rows = this.sortedRows();
var props = _puiReactHelpers.mergeProps(this.props, { className: ['table', 'table-sortable', 'table-data'] });

@@ -230,3 +257,3 @@ return React.createElement(

null,
rows
this.sortedRows()
)

@@ -236,109 +263,2 @@ );

});
exports.SortableTable = SortableTable;
/*doc
---
title: Tables
name: table_react
categories:
- react_base_tables
- react_all
---
*/
/*doc
<code class="pam">
<i class="fa fa-download" alt="Install the Component">
npm install pui-react-sortable-table --save
</i>
</code>
Require the subcomponents:
```
var SortableTable = require('pui-react-sortable-table').SortableTable;
var TableHeader = require('pui-react-sortable-table').TableHeader;
var TableRow = require('pui-react-sortable-table').TableRow;
var TableCell = require('pui-react-sortable-table').TableCell;
```
---
title: Sortable
name: table_sortable_react
parent: table_react
---
The `SortableTable` component is a robust component that offers a styled table with fully
functioning sort. If the rows change, the content on the page will update.
The `SortableTable` expects the following properties:
Property | Required? | Type | Description
-----------| ----------| ---------------------------------| --------------------------------------------------------------------------
`headers` | **yes** | Array of TableHeader components | The headers to display in the desired order
The `TableHeader` objects should have the following structure:
Property | Required? | Type | Description
-----------| ----------|------------------| --------------------------------------------------------------------------
`sortable` | no | Boolean | Is this column sortable? Defaults to false
If a column is marked as being sortable, it will attempt to sort the values as strings.
```jsx_example
var sortTableData = [
{
instances: '1',
name: 'foo',
cpu: 'po',
synergy: 'qum',
ram: 'bee',
},
{
name: 'yee',
instances: 'di',
cpu: 'no',
synergy: 'aum'
},
{
name: 'zee',
instances: 'si',
cpu: 'mo',
synergy: 'wum'
},
{
name: 'jee',
instances: 'ui',
cpu: 'no',
synergy: 'mum'
}
];
```
```react_example
<SortableTable
headers={[
<TableHeader sortable={true}>Name</TableHeader>,
<TableHeader sortable={true}>Instances</TableHeader>,
<TableHeader sortable={true}>CPU</TableHeader>,
<TableHeader>Synergy</TableHeader>,
]}
className="table-light">
{sortTableData.map(function(datum, key) {
return (
<TableRow key={key}>
<TableCell>{datum.name}</TableCell>
<TableCell>{datum.instances}</TableCell>
<TableCell>{datum.cpu}</TableCell>
<TableCell>{datum.synergy}</TableCell>
</TableRow>
);
})}
</SortableTable>
```
*/
exports.SortableTable = SortableTable;