diff --git a/src/Material-Design-Lite-Demo/MDLDemoLibrary.class.st b/src/Material-Design-Lite-Demo/MDLDemoLibrary.class.st
index c15ca2df..bf87d031 100644
--- a/src/Material-Design-Lite-Demo/MDLDemoLibrary.class.st
+++ b/src/Material-Design-Lite-Demo/MDLDemoLibrary.class.st
@@ -4,7 +4,7 @@ I contain all the pictures and stylesheets usefull for the demo
 Class {
 	#name : #MDLDemoLibrary,
 	#superclass : #WAFileLibrary,
-	#category : #'Material-Design-Lite-Demo-Core'
+	#category : 'Material-Design-Lite-Demo-Core'
 }
 
 { #category : #uploaded }
diff --git a/src/Material-Design-Lite-Demo/MDLTableWidgetScreen.class.st b/src/Material-Design-Lite-Demo/MDLTableWidgetScreen.class.st
index 867439f7..ff4634b0 100644
--- a/src/Material-Design-Lite-Demo/MDLTableWidgetScreen.class.st
+++ b/src/Material-Design-Lite-Demo/MDLTableWidgetScreen.class.st
@@ -17,6 +17,22 @@ MDLTableWidgetScreen class >> title [
 	^ 'Table widget'
 ]
 
+{ #category : #accessing }
+MDLTableWidgetScreen >> renderPaginatedTableWidgetOn: html [
+	html
+		render:
+			(MDLTableWidget new
+				addNumericColumnNamed: 'Integer' evaluated: #yourself;
+				addStringColumnNamed: 'String with commas' evaluated: [ :x | x asStringWithCommas ];
+				addStringColumnNamed: 'As words' evaluated: [ :x | x asWords capitalized ];
+				addAjaxButtonColumnWithIconName: 'explore'
+					onClick: [ :htmlCanvas :x | htmlCanvas javascript alert: 'Explore ' , x asString ]
+					tooltip: 'Explore integer related to the row.';
+				collection: (1000 to: 5000 by: 100);
+				bePaginated;
+				yourself)
+]
+
 { #category : #rendering }
 MDLTableWidgetScreen >> renderScreenContentOn: html [
 	self render: self table on: html
@@ -48,5 +64,6 @@ MDLTableWidgetScreen >> renderTableWidgetOn: html [
 MDLTableWidgetScreen >> table [
 	^ OrderedDictionary new
 		add: 'Table Widget' -> #renderTableWidgetOn:;
+		add: 'Paginated table widget' -> #renderPaginatedTableWidgetOn:;
 		yourself
 ]
diff --git a/src/Material-Design-Lite-Widgets-Tests/MDLDisplayPaginatedTableContentTest.class.st b/src/Material-Design-Lite-Widgets-Tests/MDLDisplayPaginatedTableContentTest.class.st
new file mode 100644
index 00000000..0c1e87f9
--- /dev/null
+++ b/src/Material-Design-Lite-Widgets-Tests/MDLDisplayPaginatedTableContentTest.class.st
@@ -0,0 +1,256 @@
+"
+A MDLDisplayPaginatedTableContentTest is a test class for testing the behavior of MDLDisplayPaginatedTableContent
+"
+Class {
+	#name : #MDLDisplayPaginatedTableContentTest,
+	#superclass : #SGTAbstractSeasideTestCase,
+	#category : #'Material-Design-Lite-Widgets-Tests-Table'
+}
+
+{ #category : #test }
+MDLDisplayPaginatedTableContentTest >> testIndexOfLastRowToShow [
+	| contentDisplayStrategy table |
+	contentDisplayStrategy := MDLDisplayPaginatedTableContent new.
+	table := MDLTableWidget new
+					contentDisplayStrategy: contentDisplayStrategy;
+					collection: (1 to: 100) asArray;
+					yourself.
+					
+	self assert: contentDisplayStrategy rowsPerPage equals: 5.
+	self assert: contentDisplayStrategy indexOfLastRowToShow equals: 5.
+	
+	contentDisplayStrategy rowsPerPage: 10.
+	
+	self assert: contentDisplayStrategy rowsPerPage equals: 10.
+	self assert: contentDisplayStrategy indexOfLastRowToShow equals: 10.
+	
+]
+
+{ #category : #test }
+MDLDisplayPaginatedTableContentTest >> testInitialize [
+	| contentDisplayStrategy |
+	contentDisplayStrategy := MDLDisplayPaginatedTableContent new.
+	
+	self assert: contentDisplayStrategy position equals: contentDisplayStrategy initialPosition.
+	self assert: contentDisplayStrategy rowsPerPagePossibilities equals: contentDisplayStrategy defaultRowsPerPagePossibilities
+]
+
+{ #category : #test }
+MDLDisplayPaginatedTableContentTest >> testIsAtEnd [
+	| contentDisplayStrategy table |
+	contentDisplayStrategy := MDLDisplayPaginatedTableContent new.
+	table := MDLTableWidget new
+					contentDisplayStrategy: contentDisplayStrategy;
+					collection: (1 to: 100) asArray;
+					yourself.
+					
+	self assert: contentDisplayStrategy position equals: contentDisplayStrategy initialPosition.
+	contentDisplayStrategy rowsPerPage: 50.
+	
+	self deny: contentDisplayStrategy isAtEnd.
+	self assert: contentDisplayStrategy position equals: contentDisplayStrategy initialPosition.
+	
+	contentDisplayStrategy nextPosition.
+	
+	self assert: contentDisplayStrategy isAtEnd.
+	self assert: contentDisplayStrategy position equals: 51.
+	
+	"Do not move if we call #nextPosition again."
+	contentDisplayStrategy nextPosition.
+	
+	self assert: contentDisplayStrategy isAtEnd.
+	self assert: contentDisplayStrategy position equals: 51.
+]
+
+{ #category : #test }
+MDLDisplayPaginatedTableContentTest >> testNextPosition [
+	| contentDisplayStrategy table |
+	contentDisplayStrategy := MDLDisplayPaginatedTableContent new.
+	table := MDLTableWidget new
+					contentDisplayStrategy: contentDisplayStrategy;
+					collection: (1 to: 100) asArray;
+					yourself.
+					
+	self assert: contentDisplayStrategy position equals: contentDisplayStrategy initialPosition.
+	self assert: contentDisplayStrategy rowsPerPage equals: 5.
+	
+	contentDisplayStrategy nextPosition.
+	
+	self assert: contentDisplayStrategy position equals: 6.
+	
+	contentDisplayStrategy nextPosition.
+	
+	self assert: contentDisplayStrategy position equals: 11.
+]
+
+{ #category : #test }
+MDLDisplayPaginatedTableContentTest >> testNextPosition2 [
+	| contentDisplayStrategy table |
+	contentDisplayStrategy := MDLDisplayPaginatedTableContent new.
+	table := MDLTableWidget new
+					contentDisplayStrategy: contentDisplayStrategy;
+					collection: (1 to: 100) asArray;
+					yourself.
+					
+	self assert: contentDisplayStrategy position equals: contentDisplayStrategy initialPosition.
+	contentDisplayStrategy rowsPerPage: 10.
+	
+	contentDisplayStrategy nextPosition.
+	
+	self assert: contentDisplayStrategy position equals: 11.
+	
+	contentDisplayStrategy nextPosition.
+	
+	self assert: contentDisplayStrategy position equals: 21.
+]
+
+{ #category : #test }
+MDLDisplayPaginatedTableContentTest >> testPreviousPosition [
+	| contentDisplayStrategy table |
+	contentDisplayStrategy := MDLDisplayPaginatedTableContent new.
+	table := MDLTableWidget new
+					contentDisplayStrategy: contentDisplayStrategy;
+					collection: (1 to: 100) asArray;
+					yourself.
+	contentDisplayStrategy rowsPerPage: 10.
+	contentDisplayStrategy position: 91.
+	
+	contentDisplayStrategy previousPosition.
+	self assert: contentDisplayStrategy position equals: 81.
+	
+	contentDisplayStrategy previousPosition.
+	self assert: contentDisplayStrategy position equals: 71.
+	
+	contentDisplayStrategy previousPosition.
+	self assert: contentDisplayStrategy position equals: 61.
+	
+	contentDisplayStrategy previousPosition.
+	self assert: contentDisplayStrategy position equals: 51.
+	
+	contentDisplayStrategy previousPosition.
+	self assert: contentDisplayStrategy position equals: 41.
+	
+	contentDisplayStrategy previousPosition.
+	self assert: contentDisplayStrategy position equals: 31.
+	
+	contentDisplayStrategy previousPosition.
+	self assert: contentDisplayStrategy position equals: 21.
+	
+	contentDisplayStrategy previousPosition.
+	self assert: contentDisplayStrategy position equals: 11.
+	
+	contentDisplayStrategy previousPosition.
+	self assert: contentDisplayStrategy position equals: 1.
+	
+	"Check it does nothing once we reached beginning of collection."
+	contentDisplayStrategy previousPosition.
+	self assert: contentDisplayStrategy position equals: 1.
+]
+
+{ #category : #test }
+MDLDisplayPaginatedTableContentTest >> testRenderPagesInfoOn [
+	| contentDisplayStrategy table |
+	contentDisplayStrategy := MDLDisplayPaginatedTableContent new.
+	table := MDLTableWidget new
+					contentDisplayStrategy: contentDisplayStrategy;
+					collection: (1 to: 100) asArray;
+					yourself.
+	self
+		assert: [ :html | contentDisplayStrategy renderPagesInfoOn: html ]
+		generates: '1 - 5 of 100'.
+	
+	contentDisplayStrategy nextPosition.
+	
+	self
+		assert: [ :html | contentDisplayStrategy renderPagesInfoOn: html ]
+		generates: '6 - 10 of 100'.
+]
+
+{ #category : #test }
+MDLDisplayPaginatedTableContentTest >> testRenderPagesInfoOn2 [
+	| contentDisplayStrategy table |
+	contentDisplayStrategy := MDLDisplayPaginatedTableContent new.
+	table := MDLTableWidget new
+					contentDisplayStrategy: contentDisplayStrategy;
+					collection: (1 to: 100) asArray;
+					yourself.
+	
+	contentDisplayStrategy rowsPerPage: 10.
+	
+	self
+		assert: [ :html | contentDisplayStrategy renderPagesInfoOn: html ]
+		generates: '1 - 10 of 100'.
+	
+	contentDisplayStrategy nextPosition.
+	
+	self
+		assert: [ :html | contentDisplayStrategy renderPagesInfoOn: html ]
+		generates: '11 - 20 of 100'.
+]
+
+{ #category : #test }
+MDLDisplayPaginatedTableContentTest >> testRowsPerPage [
+	| contentDisplayStrategy |
+	contentDisplayStrategy := MDLDisplayPaginatedTableContent new.
+	
+	self assert: contentDisplayStrategy rowsPerPage equals: contentDisplayStrategy rowsPerPagePossibilities first
+]
+
+{ #category : #test }
+MDLDisplayPaginatedTableContentTest >> testRowsPerPageRowsPerPagePossibilitiesIsEmpty [
+	| contentDisplayStrategy |
+	contentDisplayStrategy := MDLDisplayPaginatedTableContent new.
+	
+	contentDisplayStrategy rowsPerPagePossibilities: #().
+	
+	self
+		should: [ contentDisplayStrategy rowsPerPage ]
+		raise: Error
+		withExceptionDo: [ :ex | self assert: ex messageText equals: '#rowsPerPagePossibilities is empty' ]
+]
+
+{ #category : #test }
+MDLDisplayPaginatedTableContentTest >> testRowsToDisplayDo [
+	| contentDisplayStrategy table |
+	contentDisplayStrategy := MDLDisplayPaginatedTableContent new.
+	table := MDLTableWidget new
+					contentDisplayStrategy: contentDisplayStrategy;
+					collection: (1 to: 100) asArray;
+					yourself.
+					
+	self assertCollection: (Array streamContents: [ :stream | contentDisplayStrategy rowsToDisplayDo: [ :i | stream nextPut: i ] ]) equals: #(1 2 3 4 5).
+	
+	contentDisplayStrategy nextPosition.
+	
+	self assertCollection: (Array streamContents: [ :stream | contentDisplayStrategy rowsToDisplayDo: [ :i | stream nextPut: i ] ]) equals: #(6 7 8 9 10).
+]
+
+{ #category : #test }
+MDLDisplayPaginatedTableContentTest >> testRowsToDisplayDo2 [
+	| contentDisplayStrategy table |
+	contentDisplayStrategy := MDLDisplayPaginatedTableContent new.
+	table := MDLTableWidget new
+					contentDisplayStrategy: contentDisplayStrategy;
+					collection: (1 to: 100) asArray;
+					yourself.
+					
+	contentDisplayStrategy rowsPerPage: 10.
+					
+	self assertCollection: (Array streamContents: [ :stream | contentDisplayStrategy rowsToDisplayDo: [ :i | stream nextPut: i ] ]) equals: #(1 2 3 4 5 6 7 8 9 10).
+	
+	contentDisplayStrategy nextPosition.
+	
+	self assertCollection: (Array streamContents: [ :stream | contentDisplayStrategy rowsToDisplayDo: [ :i | stream nextPut: i ] ]) equals: #(11 12 13 14 15 16 17 18 19 20).
+]
+
+{ #category : #test }
+MDLDisplayPaginatedTableContentTest >> testTotalNumberOfRows [
+	| contentDisplayStrategy table |
+	contentDisplayStrategy := MDLDisplayPaginatedTableContent new.
+	table := MDLTableWidget new
+					contentDisplayStrategy: contentDisplayStrategy;
+					collection: (1 to: 100) asArray;
+					yourself.
+					
+	self assert: contentDisplayStrategy totalNumberOfRows equals: table collection size.
+]
diff --git a/src/Material-Design-Lite-Widgets/MDLDisplayFullTableContent.class.st b/src/Material-Design-Lite-Widgets/MDLDisplayFullTableContent.class.st
new file mode 100644
index 00000000..588fb2be
--- /dev/null
+++ b/src/Material-Design-Lite-Widgets/MDLDisplayFullTableContent.class.st
@@ -0,0 +1,26 @@
+"
+I am a simple strategy displaying the full content of the table.
+
+I have not footer to display.
+"
+Class {
+	#name : #MDLDisplayFullTableContent,
+	#superclass : #MDLTableContentDisplayStrategy,
+	#category : #'Material-Design-Lite-Widgets-Table'
+}
+
+{ #category : #rendering }
+MDLDisplayFullTableContent >> renderContentOn: html [
+	html tableBody
+		class: 'mdl-table-widget__body';
+		with: [ 
+		self tableWidget collection do: [ :row | 
+			html tableRow: [ 
+				self tableWidget columnDescriptions do: [ :columnDescription |
+					columnDescription render: row on: html ] ] ] ]
+]
+
+{ #category : #rendering }
+MDLDisplayFullTableContent >> renderFooterOn: html [
+	"Nothing to render here."
+]
diff --git a/src/Material-Design-Lite-Widgets/MDLDisplayPaginatedTableContent.class.st b/src/Material-Design-Lite-Widgets/MDLDisplayPaginatedTableContent.class.st
new file mode 100644
index 00000000..0b77f4f8
--- /dev/null
+++ b/src/Material-Design-Lite-Widgets/MDLDisplayPaginatedTableContent.class.st
@@ -0,0 +1,219 @@
+"
+I am a pagination strategy displaying on page at a time, the content of the table.
+
+I can be configured to control:
+- #rowsPerPagePossibilities : the options available for page size.
+- #rowsToShow : the current number of rows per page that I show (if nil, I take the first number in #rowsPerPagePossibilities).
+- #ajaxOnCompleteHook : an ajax hook to call when I refresh the content of the table.
+"
+Class {
+	#name : #MDLDisplayPaginatedTableContent,
+	#superclass : #MDLTableContentDisplayStrategy,
+	#instVars : [
+		'position',
+		'rowsToShow',
+		'rowsPerPagePossibilities',
+		'ajaxOnCompleteHook'
+	],
+	#category : #'Material-Design-Lite-Widgets-Table'
+}
+
+{ #category : #'instance creation' }
+MDLDisplayPaginatedTableContent class >> rowsPerPagePossibilities: rowsPerPagePossibilities [
+	^ self new
+		rowsPerPagePossibilities: rowsPerPagePossibilities;
+		yourself
+]
+
+{ #category : #'instance creation' }
+MDLDisplayPaginatedTableContent class >> rowsPerPagePossibilities: rowsPerPagePossibilities rowsToShow: rowsToShow [
+	^ (self rowsPerPagePossibilities: rowsPerPagePossibilities)
+		rowsPerPage: rowsToShow;
+		yourself
+]
+
+{ #category : #accessing }
+MDLDisplayPaginatedTableContent >> ajaxOnCompleteHook [
+	^ ajaxOnCompleteHook ifNil: [ 'componentHandler.upgradeDom();' ]
+]
+
+{ #category : #accessing }
+MDLDisplayPaginatedTableContent >> ajaxOnCompleteHook: anObject [
+	ajaxOnCompleteHook := anObject
+]
+
+{ #category : #'private - script generation' }
+MDLDisplayPaginatedTableContent >> ajaxUpdateScriptOn: html [
+	^ html jQuery
+		script: [ :s | 
+			s
+				<<
+					((html jQuery id: self tableWidget id) parent load
+						html: [ :ajaxHtml | ajaxHtml render: self tableWidget ];
+						onComplete: self ajaxOnCompleteHook) ]
+]
+
+{ #category : #accessing }
+MDLDisplayPaginatedTableContent >> defaultRowsPerPagePossibilities [
+	"Possibilities provided to the user for the #rowsPerPage value."
+	^ #(5 10 50)
+]
+
+{ #category : #accessing }
+MDLDisplayPaginatedTableContent >> indexOfLastRowToShow [
+	^ (self position + self rowsPerPage - 1) min: self totalNumberOfRows
+]
+
+{ #category : #accessing }
+MDLDisplayPaginatedTableContent >> initialPosition [
+	"The first position that set when I am initialized."
+	^ 1
+]
+
+{ #category : #initialization }
+MDLDisplayPaginatedTableContent >> initialize [
+	super initialize.
+	self position: self initialPosition.
+	self rowsPerPagePossibilities: self defaultRowsPerPagePossibilities
+]
+
+{ #category : #testing }
+MDLDisplayPaginatedTableContent >> isAtEnd [
+	^ self position + self rowsPerPage > self tableWidget collection size
+]
+
+{ #category : #accessing }
+MDLDisplayPaginatedTableContent >> minimalPosition [
+	"The minimal position that the strategy can reach."
+	^ 1
+]
+
+{ #category : #actions }
+MDLDisplayPaginatedTableContent >> nextPosition [
+	self isAtEnd
+		ifFalse: [ self position: self position + self rowsPerPage ]
+]
+
+{ #category : #accessing }
+MDLDisplayPaginatedTableContent >> position [
+	^ position
+]
+
+{ #category : #accessing }
+MDLDisplayPaginatedTableContent >> position: anObject [
+	position := anObject
+]
+
+{ #category : #actions }
+MDLDisplayPaginatedTableContent >> previousPosition [
+	self position: (self position - self rowsPerPage max: self minimalPosition)
+]
+
+{ #category : #'private - rendering' }
+MDLDisplayPaginatedTableContent >> renderButtonTriggering: aValuable withIcon: aSymbol disabled: isDisabled on: html [
+	html mdlButton
+		bePush;
+		colored;
+		disabled: isDisabled;
+		onClick: [ html jQuery ajax
+				callback: [ aValuable value: self ];
+				onSuccess: (self ajaxUpdateScriptOn: html) ]
+			if: isDisabled not;
+		icon: aSymbol
+]
+
+{ #category : #rendering }
+MDLDisplayPaginatedTableContent >> renderContentOn: html [
+	html tableBody
+		class: 'mdl-table-widget__body';
+		with: [ 
+			self rowsToDisplayDo: [ :row | 
+				html tableRow: [ 
+					self tableWidget columnDescriptions do: [ :columnDescription |
+						columnDescription render: row on: html ] ] ] ]
+]
+
+{ #category : #rendering }
+MDLDisplayPaginatedTableContent >> renderFooterOn: html [
+	html mdlCardTextContainer
+		class: 'mdl-table-widget__footer';
+		with: [ 
+					html div
+						mdlTypographyTextRight;
+						with: [ 
+									html text: 'Rows per page: '.
+									self renderItemsByPageSelectionComponentOn: html.
+									self renderPagesInfoOn: html.
+									self
+										renderButtonTriggering: #previousPosition
+										withIcon: #keyboard_arrow_left
+										disabled: position = 1
+										on: html.
+									self
+										renderButtonTriggering: #nextPosition
+										withIcon: #keyboard_arrow_right
+										disabled: self isAtEnd
+										on: html ] ]
+]
+
+{ #category : #'private - rendering' }
+MDLDisplayPaginatedTableContent >> renderItemsByPageSelectionComponentOn: html [
+	html
+		render:
+			(MDLSelectWidget new
+				labelBlock: #asString;
+				possibilities: self rowsPerPagePossibilities;
+				callback: [ :o | self rowsPerPage: o ]; "#rowsToShow was #elementToShow in MDLSortableTable"
+				selectedObject: self rowsPerPage;
+				sortBlock: #yourself ascending;
+				customizationBlock: [ :textField :renderer | 
+					textField onChange: (html jQuery ajax serializeThis onComplete: (self ajaxUpdateScriptOn: html)) ];
+				yourself)
+]
+
+{ #category : #'private - rendering' }
+MDLDisplayPaginatedTableContent >> renderPagesInfoOn: html [
+	html
+		text:
+			(String
+				streamContents: [ :s | 
+					s
+						print: position;
+						nextPutAll: ' - ';
+						print: self indexOfLastRowToShow;
+						nextPutAll: ' of ';
+						print: self totalNumberOfRows ])
+]
+
+{ #category : #accessing }
+MDLDisplayPaginatedTableContent >> rowsPerPage [
+	^ rowsToShow ifNil: [ rowsToShow := self rowsPerPagePossibilities ifNotEmpty: #first ifEmpty: [ self error: '#rowsPerPagePossibilities is empty' ] ]
+]
+
+{ #category : #accessing }
+MDLDisplayPaginatedTableContent >> rowsPerPage: anObject [
+	rowsToShow := anObject
+]
+
+{ #category : #accessing }
+MDLDisplayPaginatedTableContent >> rowsPerPagePossibilities [
+	^ rowsPerPagePossibilities
+]
+
+{ #category : #accessing }
+MDLDisplayPaginatedTableContent >> rowsPerPagePossibilities: anObject [
+	rowsPerPagePossibilities := anObject
+]
+
+{ #category : #enumerating }
+MDLDisplayPaginatedTableContent >> rowsToDisplayDo: aBlock [
+	self tableWidget collection
+		from: self position
+		to: self indexOfLastRowToShow
+		do: aBlock
+]
+
+{ #category : #accessing }
+MDLDisplayPaginatedTableContent >> totalNumberOfRows [
+	^ self tableWidget collection size
+]
diff --git a/src/Material-Design-Lite-Widgets/MDLTableContentDisplayStrategy.class.st b/src/Material-Design-Lite-Widgets/MDLTableContentDisplayStrategy.class.st
new file mode 100644
index 00000000..61a35437
--- /dev/null
+++ b/src/Material-Design-Lite-Widgets/MDLTableContentDisplayStrategy.class.st
@@ -0,0 +1,34 @@
+"
+I am an abstract class implementing the strategy design pattern for rendering the content of a MDLTableWidget.
+I declare the interface that strategies rendering the content of a MDLTableWidget must implement.
+
+I hold a reference to the instance of MDLTableWidget using myself in my #tableWidget.
+"
+Class {
+	#name : #MDLTableContentDisplayStrategy,
+	#superclass : #Object,
+	#instVars : [
+		'tableWidget'
+	],
+	#category : #'Material-Design-Lite-Widgets-Table'
+}
+
+{ #category : #rendering }
+MDLTableContentDisplayStrategy >> renderContentOn: html [
+	self subclassResponsibility
+]
+
+{ #category : #rendering }
+MDLTableContentDisplayStrategy >> renderFooterOn: html [
+	self subclassResponsibility
+]
+
+{ #category : #accessing }
+MDLTableContentDisplayStrategy >> tableWidget [
+	^ tableWidget
+]
+
+{ #category : #accessing }
+MDLTableContentDisplayStrategy >> tableWidget: anObject [
+	tableWidget := anObject
+]
diff --git a/src/Material-Design-Lite-Widgets/MDLTableWidget.class.st b/src/Material-Design-Lite-Widgets/MDLTableWidget.class.st
index e98d4238..c1142b5e 100644
--- a/src/Material-Design-Lite-Widgets/MDLTableWidget.class.st
+++ b/src/Material-Design-Lite-Widgets/MDLTableWidget.class.st
@@ -10,7 +10,9 @@ Class {
 	#superclass : #WAComponent,
 	#instVars : [
 		'columnDescriptions',
-		'collection'
+		'collection',
+		'contentDisplayStrategy',
+		'id'
 	],
 	#category : #'Material-Design-Lite-Widgets-Table'
 }
@@ -71,9 +73,24 @@ MDLTableWidget >> addStringColumnNamed: aString evaluated: aBlock [
 							yourself)
 ]
 
+{ #category : #configuring }
+MDLTableWidget >> bePaginated [
+	self contentDisplayStrategy: MDLDisplayPaginatedTableContent new
+]
+
+{ #category : #configuring }
+MDLTableWidget >> bePaginatedWithRowsPerPagePossibilities: rowsPerPagePossibilities [
+	self contentDisplayStrategy: (MDLDisplayPaginatedTableContent rowsPerPagePossibilities: rowsPerPagePossibilities)
+]
+
+{ #category : #configuring }
+MDLTableWidget >> bePaginatedWithRowsPerPagePossibilities: rowsPerPagePossibilities currentRowsPerPage: currentRowsPerPage [
+	self contentDisplayStrategy: (MDLDisplayPaginatedTableContent rowsPerPagePossibilities: rowsPerPagePossibilities rowsToShow: currentRowsPerPage)
+]
+
 { #category : #accessing }
 MDLTableWidget >> collection [
-	^ collection
+	^ collection value
 ]
 
 { #category : #accessing }
@@ -86,31 +103,52 @@ MDLTableWidget >> columnDescriptions [
 	^ columnDescriptions
 ]
 
+{ #category : #accessing }
+MDLTableWidget >> contentDisplayStrategy [
+	^ contentDisplayStrategy
+]
+
+{ #category : #accessing }
+MDLTableWidget >> contentDisplayStrategy: anObject [
+	contentDisplayStrategy := anObject.
+	contentDisplayStrategy tableWidget: self
+]
+
+{ #category : #configuring }
+MDLTableWidget >> displayFullTableContent [
+	self contentDisplayStrategy: MDLDisplayFullTableContent new
+]
+
+{ #category : #accessing }
+MDLTableWidget >> id [
+	^ id
+]
+
 { #category : #initialization }
 MDLTableWidget >> initialize [
 	super initialize.
+	self displayFullTableContent.
 	columnDescriptions := OrderedCollection new.
 	collection := #()
 ]
 
 { #category : #rendering }
 MDLTableWidget >> renderContentOn: html [
-	html mdlTable
-		class: 'mdl-table-widget';
-		with: [
-			self renderTableHeadOn: html.
-			self renderTableBodyOn: html ]
-]
-
-{ #category : #rendering }
-MDLTableWidget >> renderTableBodyOn: html [
-	html tableBody
-		class: 'mdl-table-widget__body';
+	html mdlCard
+		shadow: 2;
+		style: 'width: 100%; overflow: initial;';
+		"class: self tableStyle if: self tableStyle isNotNil;" "TODO, see issue #302"
+		id: (id := html nextId);
 		with: [ 
-		self collection do: [ :row | 
-			html tableRow: [ 
-				self columnDescriptions do: [ :columnDescription |
-					columnDescription render: row on: html ] ] ] ]
+			html mdlTable
+				style: 'width: 100%; overflow: initial;';
+				class: 'mdl-table-widget';
+				with: [ 
+					self renderTableHeadOn: html.
+					self contentDisplayStrategy
+						renderContentOn: html ].
+		self contentDisplayStrategy
+			renderFooterOn: html ]
 ]
 
 { #category : #rendering }