#Introduction

In this lab, you'll refactor the app, making the table its own class, adding the map,


#Steps

??Move the table into its own class

Create a new file named `apps/earthquakes/view/earthquakes/Table.mjs` with this content.

<pre class="runnable text readonly">
import Base from '../../../../node_modules/neo.mjs/src/table/Container.mjs';

class Table extends Base {
    static config = {
        className: 'Earthquakes.view.earthquakes.Table',
        ntype: 'earthquakes-table',
        columns: [{
            dataField: 'timestamp',
            text: 'Date',
            flex: 1,
            renderer: data => data.value.toLocaleDateString(undefined, {weekday: 'long', year: 'numeric', month: 'long', day: 'numeric'})
        }, {
            dataField: 'humanReadableLocation',
            text: 'Location',
            flex: 1,
        }, {
            dataField: 'size',
            text: 'Magnitude',
            align: 'right',
            flex: 1,
            renderer: data => data.value.toLocaleString()
        }]
    }
}

Neo.setupClass(Table);
export default Table;
</pre>

??Review the code

What's in the code? 

- The class extends `Neo.table.Container`
- It has an `ntype`, which we can use when creating an instance, or when debugging
- Each column has `text` and `dataField` configs, and some have renderers

??Use the new component

Edit `apps/earthquakes/view/MainView` and look for the config block for the table. 

- Import the new class: `import EarthquakesTable from './earthquakes/Table.mjs';`
- Replace the `module: Table` with `module: EarthquakesTable`
- Remove the `columns:[]` config
- Leave the `store` config alone

Save and refresh the browser, and your app should run as before. 

You can confim that the  new class _is being loaded_ by using DevTools to try to open `earthquakes/Table` &mdash; if it
was imported, it'll be listed.

You can conrim that an instance _was created_ by using the DevTools console and searching for it via

    Neo.first('earthquakes-table')

That will return a component reference if there's a match.

