Skip to content

Commit

Permalink
sortable table (#51)
Browse files Browse the repository at this point in the history 
add sortable functionality to the Table component and accompanying unit tests and storybook story
  • Loading branch information
@MichaelRoytman
MichaelRoytman authored Nov 1, 2017
1 parent 64bccb1 commit db72d5a
Show file tree
Hide file tree
Showing 9 changed files with 550 additions and 12 deletions.
163 changes: 163 additions & 0 deletions .storybook/__snapshots__/Storyshots.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1226,16 +1226,19 @@ exports[`Storyshots Table default heading 1`] = `
>
<tr>
<th
className=""
scope="col"
>
Name
</th>
<th
className=""
scope="col"
>
Famous For
</th>
<th
className=""
scope="col"
>
Coat Color
Expand Down Expand Up @@ -1314,16 +1317,19 @@ exports[`Storyshots Table responsive 1`] = `
>
<tr>
<th
className=""
scope="col"
>
Name
</th>
<th
className=""
scope="col"
>
Famous For
</th>
<th
className=""
scope="col"
>
Coat Color
Expand Down Expand Up @@ -1390,6 +1396,157 @@ exports[`Storyshots Table responsive 1`] = `
</table>
`;

exports[`Storyshots Table sortable 1`] = `
<table
className="table"
>
<caption>
Famous Internet Cats
</caption>
<thead
className=""
>
<tr>
<th
className="sortable"
scope="col"
>
<button
className="btn"
onBlur={[Function]}
onClick={[Function]}
onKeyDown={[Function]}
type="button"
>
<span>
Name
<span
className="sr-only"
>
sort descending
</span>
<span
className="fa fa-sort-desc"
/>
</span>
</button>
</th>
<th
className="sortable"
scope="col"
>
<button
className="btn"
onBlur={[Function]}
onClick={[Function]}
onKeyDown={[Function]}
type="button"
>
<span>
Famous For
<span
className="sr-only"
>
click to sort
</span>
<span
className="fa fa-sort"
/>
</span>
</button>
</th>
<th
className="sortable"
scope="col"
>
<button
className="btn"
onBlur={[Function]}
onClick={[Function]}
onKeyDown={[Function]}
type="button"
>
<span>
Coat Color
<span
className="sr-only"
>
click to sort
</span>
<span
className="fa fa-sort"
/>
</span>
</button>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Smoothie
</td>
<td>
modeling
</td>
<td>
orange tabby
</td>
</tr>
<tr>
<td>
Maru
</td>
<td>
being a lovable oaf
</td>
<td>
brown tabby
</td>
</tr>
<tr>
<td>
Lil Bub
</td>
<td>
weird tongue
</td>
<td>
brown tabby
</td>
</tr>
<tr>
<td>
Keyboard Cat
</td>
<td>
piano virtuoso
</td>
<td>
orange tabby
</td>
</tr>
<tr>
<td>
Grumpy Cat
</td>
<td>
serving moods
</td>
<td>
siamese
</td>
</tr>
</tbody>
</table>
`;

exports[`Storyshots Table table-striped 1`] = `
<table
className="table table-striped"
Expand All @@ -1402,16 +1559,19 @@ exports[`Storyshots Table table-striped 1`] = `
>
<tr>
<th
className=""
scope="col"
>
Name
</th>
<th
className=""
scope="col"
>
Famous For
</th>
<th
className=""
scope="col"
>
Coat Color
Expand Down Expand Up @@ -1490,16 +1650,19 @@ exports[`Storyshots Table unstyled 1`] = `
>
<tr>
<th
className=""
scope="col"
>
Name
</th>
<th
className=""
scope="col"
>
Famous For
</th>
<th
className=""
scope="col"
>
Coat Color
Expand Down
12 changes: 8 additions & 4 deletions .storybook/webpack.config.js
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
const path = require('path');

module.exports = {
devtool: "source-map",
devtool: 'source-map',
module: {
rules: [
{
test: /\.scss$/,
test: /\.scss|\.css$/,
use: [
{
loader: 'style-loader',
Expand All @@ -23,14 +23,18 @@ module.exports = {
options: {
data: '@import "paragon-reset";',
includePaths: [
path.join(__dirname, '../src/utils'),
path.join(__dirname, '../node_modules'),
path.join(__dirname, '../src/utils'),
path.join(__dirname, '../node_modules'),
],
sourceMap: true,
},
},
],
},
{
test: /\.(woff2?|ttf|svg|eot)(\?v=\d+\.\d+\.\d+)?$/,
loader: 'file-loader',
},
],
},
};
6 changes: 4 additions & 2 deletions package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@edx/paragon",
"version": "1.0.0",
"version": "1.1.0",
"description": "Accessible, responsive UI component library based on Bootstrap.",
"main": "src/index.js",
"author": "arizzitano",
Expand All @@ -19,6 +19,7 @@
"dependencies": {
"@edx/edx-bootstrap": "^0.4.0",
"classnames": "^2.2.5",
"font-awesome": "^4.7.0",
"prop-types": "^15.5.8",
"react": "^15.5.4",
"react-dom": "^15.5.4",
Expand All @@ -43,10 +44,11 @@
"enzyme": "^2.8.2",
"eslint": "^4.5.0",
"eslint-config-airbnb": "^15.0.1",
"eslint-config-edx": "^4.0.0",
"eslint-config-edx": "^4.0.1",
"eslint-import-resolver-webpack": "^0.8.1",
"eslint-plugin-jsx-a11y": "^5.1.0",
"eslint-plugin-react": "^7.1.0",
"file-loader": "^1.1.4",
"greenkeeper-lockfile": "^1.7.1",
"husky": "^0.14.1",
"identity-obj-proxy": "^3.0.0",
Expand Down
2 changes: 1 addition & 1 deletion src/StatusAlert/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ Provides a status alert component with customizable dialog options. StatusAlert
`dismissible` specifies if the status alert will include the dismissible X button to close the alert. It defaults to true.

### `onClose` (function; conditionally required)
`onClose` is a function that is called on close. It can be used to perform actions upon closing of the status alert, such as restoring focus to the previous logical focusable element. It is only required if `dismissible` is set to `true` and not required if the alert if not `dismissible`.
`onClose` is a function that is called on close. It can be used to perform actions upon closing of the status alert, such as restoring focus to the previous logical focusable element. It is only required if `dismissible` is set to `true` and not required if the alert is not `dismissible`.

### `open` (boolean; optional)
`open` specifies whether the status alert renders open or closed on the initial render. It defaults to false.
29 changes: 27 additions & 2 deletions src/Table/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,16 +5,41 @@ Provides a very basic table component with col-scoped headings displayed in the
## API

### `columns` (object array; required)
`columns` specifies the order and contents of the table's columns and provides display strings for each column's heading. It is composed of an ordered array of objects, each containing a string `key` and a string or element `label`. `label` contains the display string for each column's heading. `key` maps that label to its corresponding datum for each row in `data`, to ensure table data are displayed in their appropriate columns. The order of objects in `columns` specifies the order of the columns in the table.
`columns` specifies the order and contents of the table's columns and provides display strings for each column's heading. It is composed of an ordered array of objects. Each object contains the following keys:

1. `label` (string or element; required) contains the display string for each column's heading.
2. `key` (string; required) maps that label to its corresponding datum for each row in `data`, to ensure table data are displayed in their appropriate columns.
3. `columnSortable` (boolean; optional) specifies at the column-level whether the column is sortable. If `columnSortable` is `true`, a sort button will be rendered in the column table heading. It is only required if `tableSortable` is set to `true`.
4. `onSort` (function; conditionally required) specifies what function is called when a sortable column is clicked. It is only required if the column's `columnSortable` is set to `true`.

The order of objects in `columns` specifies the order of the columns in the table.

### `data` (object array; required)
`data` is an array of objects corresponding to the rows to display in the body of your table. The rows will display in the same order as the objects in your array. There are no real restrictions on what these rows can contain, as long as their keys are consistent. The keys are used to organize data from each row into its appropriate column, determined by the corresponding `key` property specified in each object in `columns`.

### `defaultSortedColumn` (string; conditionally required)
Specifies the key of the column that is sorted by default. It is only required if `tableSortable` is set to `true`.

### `defaultSortDirection` (string; conditionally required)
Specifies the direction the `defaultSortedColumn` is sorted in by default; it will typically be either 'asc' or 'desc'. It is only required if `tableSortable` is set to `true`.

### `caption` (string or element; optional)
Specifies a descriptive caption to be applied to the entire table.

### `className` (string array; optional)
Specifies Bootstrap class names to apply to the table. See [Bootstrap's table documentation](https://getbootstrap.com/docs/4.0/content/tables/) for a list of applicable class names.

### `headingClassName` (string array; optional)
Specifies Bootstrap class names to apply to the table heading. Options are detailed in [Bootstrap's docs](https://getbootstrap.com/docs/4.0/content/tables/#table-head-options)
Specifies Bootstrap class names to apply to the table heading. Options are detailed in [Bootstrap's docs](https://getbootstrap.com/docs/4.0/content/tables/#table-head-options).

### `tableSortable` (boolean; optional)
Specifies whether the table is sortable. This setting supercedes column-level sortability, so if it is `false`, no sortable components will be rendered.

### `sortButtonsScreenReaderText` (object; conditionally required)
Specifies the screen reader only text that accompanies the sort buttons for sortable columns. It takes the form of an object containing the following keys:

1. `asc`: (string) specifies the screen reader only text for sort buttons in the ascending state.
2. `desc`: (string) specifies the screen reader only text for sort buttons in the descending state.
3. `defaultText`: (string) specifies the screen reader only text for sort buttons that are not engaged.

It is only required if `tableSortable` is set to `true`.
1 change: 1 addition & 0 deletions src/Table/Table.scss
View file
Original file line number Diff line number Diff line change
@@ -1 +1,2 @@
@import "~bootstrap/scss/_tables";
@import "~bootstrap/scss/utilities/_screenreaders.scss";
Loading

0 comments on commit db72d5a

Please sign in to comment.