Update quick-start.md

docs/src/pages/docs/quick-start.md

@@ -22,6 +22,7 @@ To show you how this works. Let's start with a very basic table example.
 
 When thinking about a table structure, you typically have **rows** which contain **columns**. While table configurations can get far more complex with nested columns, subrows, etc. for this basic quick start, we need to define some data that resembles this structure.
 
+**JavaScript:**
 ```js
 const data = React.useMemo(
   () => [
@@ -41,13 +42,39 @@ const data = React.useMemo(
   []
 )
 ```
+**TypeScript:**
+```js
+type Entity = {
+  col1: string,
+  col2: string
+}
+
+const data = React.useMemo<Entity[]>(
+  () => [
+    {
+      col1: 'Hello',
+      col2: 'World',
+    },
+    {
+      col1: 'react-table',
+      col2: 'rocks',
+    },
+    {
+      col1: 'whatever',
+      col2: 'you want',
+    },
+  ],
+  []
+)
+```
 
 > It's important that we're using [`React.useMemo`](https://reactjs.org/docs/hooks-reference.html#usememo) here to ensure that our data isn't recreated on every render. If we didn't use `React.useMemo`, the table would think it was receiving new data on every render and attempt to recalculate a lot of logic every single time. Not cool!
 
 ## Define Columns
 
 Now that we have some data, let's create a set of **column definitions** to pass into the `useTable` hook.
 
+**JavaScript:**
 ```js
 const columns = React.useMemo(
   () => [
@@ -63,6 +90,22 @@ const columns = React.useMemo(
   []
 )
 ```
+**TypeScript:**
+```js
+const columns = React.useMemo<Column<Entity>[]>(
+  () => [
+    {
+      Header: 'Column 1',
+      accessor: 'col1', // accessor is the "key" in the data
+    },
+    {
+      Header: 'Column 2',
+      accessor: 'col2',
+    },
+  ],
+  []
+)
+```
 
 > Again, we're using `React.useMemo` so React Table doesn't recalculate the universe on every single render. Only when the memoized value actually changes!