headings -> columns

src/Table/README.md

@@ -4,11 +4,11 @@ Provides a very basic table component with col-scoped headings displayed in the
 
 ## API
 
-### `headings` (object array; required)
-`headings` 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 `headings` specifies the order of the columns in the table.
+### `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.
 
 ### `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 `headings`.
+`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`.
 
 ### `caption` (string or element; optional)
 Specifies a descriptive caption to be applied to the entire table.

src/Table/Table.stories.jsx

@@ -31,7 +31,7 @@ const catData = [
   },
 ];
 
-const catHeadings = [
+const catColumns = [
   {
     label: 'Name',
     key: 'name',
@@ -50,14 +50,14 @@ storiesOf('Table', module)
   .add('unstyled', () => (
     <Table
       data={catData}
-      headings={catHeadings}
+      columns={catColumns}
       caption="Famous Internet Cats"
     />
   ))
   .add('table-striped', () => (
     <Table
       data={catData}
-      headings={catHeadings}
+      columns={catColumns}
       caption="Famous Internet Cats"
       className={['table-striped']}
     />
@@ -65,7 +65,7 @@ storiesOf('Table', module)
   .add('default heading', () => (
     <Table
       data={catData}
-      headings={catHeadings}
+      columns={catColumns}
       caption="Famous Internet Cats"
       headingClassName={['thead-default']}
     />

src/Table/Table.test.jsx

@@ -5,7 +5,7 @@ import { shallow } from 'enzyme';
 import Table from './index';
 
 const props = {
-  headings: [
+  columns: [
     { key: 'num', label: 'Number' },
     { key: 'x2', label: 'Number * 2' },
     { key: 'sq', label: 'Number Squared' },
@@ -25,15 +25,15 @@ describe('<Table />', () => {
       />,
     );
 
-    it('with display headings in the right order', () => {
+    it('with display columns in the right order', () => {
       wrapper.find('th').forEach((th, i) => {
-        expect(th.text()).toEqual(props.headings[i].label);
+        expect(th.text()).toEqual(props.columns[i].label);
       });
     });
 
-    it('with data in the same order as the headings', () => {
+    it('with data in the same order as the columns', () => {
       wrapper.find('tr').at(1).find('td').forEach((td, i) => {
-        expect(Number(td.text())).toEqual(props.data[0][props.headings[i].key]);
+        expect(Number(td.text())).toEqual(props.data[0][props.columns[i].key]);
       });
     });
   });

src/Table/index.jsx

@@ -18,12 +18,12 @@ class Table extends React.Component {
       )}
       >
         <tr>
-          {this.props.headings.map(heading => (
+          {this.props.columns.map(col => (
             <th
-              key={heading.key}
+              key={col.key}
               scope="col"
             >
-              {heading.label}
+              {col.label}
             </th>
           ))}
         </tr>
@@ -36,8 +36,8 @@ class Table extends React.Component {
       <tbody>
         {this.props.data.map((row, i) => (
           <tr key={i}>
-            {this.props.headings.map(heading => (
-              <td key={heading.key}>{row[heading.key]}</td>
+            {this.props.columns.map(col => (
+              <td key={col.key}>{row[col.key]}</td>
             ))}
           </tr>
         ))}
@@ -67,7 +67,7 @@ Table.propTypes = {
   ]),
   className: PropTypes.arrayOf(PropTypes.string),
   data: PropTypes.arrayOf(PropTypes.object).isRequired,
-  headings: PropTypes.arrayOf(PropTypes.shape({
+  columns: PropTypes.arrayOf(PropTypes.shape({
     key: PropTypes.string.isRequired,
     label: PropTypes.oneOfType([
       PropTypes.string,